专注前端开发和vps技术交流的博客-纸飞机在原生js中我们用ajax做数据请求,在jquery中我们有$.ajax的方法做数据请求,那么在Vue中我们用什么呢?
在Vue.js中我们要用到的有axios、fetch这两种方法
一、axios
1.axios简单介绍:
首先,这不是Vue.js自由的方法,这是一个第三方库,是需要引入第三方库的,这是在Vue.js项目中用的常见的方法
2.axios在Vue.js的基本使用
1).引入第三方库:
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>注意:这个要放在Vue.js文件下面,顺序及其重要
2).基本结构
<div id="app">
<button @click="axiosGet">get</button>
<button @click="axiosPost">post</button>
</div><script>
new Vue({
el:'#app',
data:{
},
methods:{
//方法名可以自己随意取,我这里取axiosGet是为了方便区分
axiosGet(){
//get方法
},
axiosPost(){
//post方法
}
},
})
</script>同ajax一样数据请求方式当然不止get和post还有all,delete等之类的,但不管是什么请求方式,都是如出一辙的,这里就讲讲get和post两个
3).axios中的get方法:
前面的结构都看了,这里我直接写axiosGet里面的东西
axiosGet(){
//get方法
console.log(
axios.get('http://127.0.0.1:5500/Vue/day03/db/get.php',{
params:{
a:1,
b:2
}
}))
})
}这我们打印请求的结果,发现
返回的是一个Promise对象,显然我们这样是拿不到数据的,那么我们怎么拿呢???
答案是.then().catch()
axiosGet(){
//get方法
axios.get('http://127.0.0.1:8080/1901/get.php',{
params:{
a:1,
b:2
}
})
.then(data=>{
console.log(data.data)
//之所以要.data是因为promise对象中有很多东西,然而里面的data里的才是我们要的数据
})
.catch(error=>{
console.log(error)
})因为我的get.php里运算时a+b,所以应当输出3
这样就成功取到了
上面只是一种写法,还有一种
axiosGet(){
//get方法
axios({
url: 'http://127.0.0.1:8080/1901/get.php',
method: 'get',
params: {
a: 1,
b: 2
}
})
.then( res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})
}同样也可以输出得到结果,两者只是写法的不同罢了
3).axios中的post方法:
友情提示:无论是axios还是fetch的post请求都是有很大的坑的,并且别想着从官方文档找到答案,官方是错的,开始吧
axiosPost(){
//post方法
axios({
url: 'http://127.0.0.1:8080/1901/post.php',
method: 'post',
params: {
a: 1,
b: 2
}
})
.then(res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})
}
}可能在大家的想法是这么写的但时,结局是出人意料的
这个错误很明显是a和b的值没有传过去,所以显然,我们这种提交方式是错误的,那么我们该怎么提交呢?
综合了一下各位博主的方法,大概可以分成3步
- 统一设置请求头:
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';- 使用 URLSearchParams 实例化一个params对象
let params = new URLSearchParams()- 使用params对象的append方法添加数据,这里添加我的a和b
params.append('a',1)
params.append('b',2)完整的如下:
<script>
//1.设置header请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//2.使用 URLSearchParams 实例化一个params对象
let params=new URLSearchParams();
//3.使用params对象的append方法添加数据
params.append('a',1);
params.append('b',2);
new Vue({
el:'#app',
data:{
},
methods:{
axiosPost(){
//post方法
axios({
url: 'http://127.0.0.1:8080/1901/post.php',
method: 'post',
// params: {
// a: 1,
// b: 2
// }
data:params
//使用设置的数据
})
.then(res => {
console.log( res.data )
})
.catch( error => {
if( error ){
throw error
}
})
}
},
})
</script>因为我的php里post写的是a-b,所以结果应该是-1
看,世界如此美妙
axios总结:
- get方法和post方法是不同的
- post请求有效分3步
二、fetch
fetch是Vue.js自带的一种方法
上面讲过了axios的get和post,其实fetch的get和post方法和它差不多,并且,fetch的post方法也是有着同样的坑的
和axios一样返回的都是promise对象
1.fetch的get方法
fetch的get()方法同axios的get方法不同的是,fetch需要两个.then来处理
<body>
<div id="app">
<button @click="get">get</button>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
get(){
console.log(fetch('http://127.0.0.1:8080/1901/get.php',{
method: 'get'
}))
}
}
})
</script>这串代码用来验证输出类型的
输出了一个promise对象,验证了上面的猜想
那么我们接着写下去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="get">get</button>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
get(){
fetch('http://ajax.root181.com/get.php?a=1&b=2')//这里深入一点可以用拼接字符串操作拼接参数
.then(res=> {
return res.text() // 数据格式化 res.json() res.blob(),这里一定要return一下,否则,下面的then获取不到数据
})
.then(data => {
console.log( data )
})
.catch(error => {
if( error ){
throw error
}
})
}
}
})
</script>
</html>要点：
- 两个then
- 第一个then需要return返回
- 第一个then里做的是数据格式化
2.fetch的post方法
<body>
<div id="app">
<button @click="post">post</button>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
post(){
fetch('http://127.0.0.1:8080/1901/post.php',{
method:'post',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交(必须的)
}),
body: new URLSearchParams([['a',1],['b',2]]).toString()//数据传递
}).then(res=>res.text())
.then(data=>console.log(data))
.catch(error=>{
if(error){
throw error
}
})
}
}
})
</script>两点：
- headers
- body: new URLSearchParams([[“a”, 1],[“b”, 2]]).toString()
axios和fetch总结：
- axios 封装的第三方库
- fetch 原生
相同点：都是 Promise
注意：axios fetch post方法都是有坑的 ， 一定要注意
解决方法：
- 设置请求头
- 通过 new URLSearchParams() 来进行数据传参
b2st medlemmer dating richmond va dating gratis ikke betalende dating sites relationer og dating magazine bedste dating site ontario canada https://bokahotell.nu/ar-ar-dating.html usa dating chat room