本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下:
axios中文文档
https://github.com/mzabriskie/axios using-applicationx-www-form-urlencoded-format ,axios文档
在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios、下面做一个简单的介绍。
安装
使用节点
npm安装axios
使用cdn
& lt;脚本src=" https://unpkg.com/axios/dist/axios.min.js "祝辞& lt;/script>
基本使用方法
<强>得到请求
//请求与一个给定的用户ID
axios.get('/用户# 63;ID=12345)
不要犹豫(函数(响应){
console.log(响应);
}）
.catch(函数(错误){
console.log(错误);
});//可选上面的请求也可以做
axios。get (/user, {
参数:{
ID: 12345
}
}）
不要犹豫(函数(响应){
console.log(响应);
}）
.catch(函数(错误){
console.log(错误);
});
之前
<强>文章请求
axios。帖子(/user, {
名字:“弗雷德”,
姓:“打火石”
}）
不要犹豫(函数(响应){
console.log(响应);
}）
.catch(函数(错误){
console.log(错误);
});
同时执行多个请求
函数getUserAccount () {
返回axios.get ('/user/12345 ');
}
函数getUserPermissions () {
返回axios.get (/user/12345/权限);
}
axios.all ([getUserAccount (), getUserPermissions ()))
不要犹豫(axios。传播(函数(acct烫发){//两个请求现在完成
}））;
之前
这个的使用方法其实和原生的ajax是一样的,一看就懂。
使用应用程序/x-www-urlencoded形式的帖子请求:
var qs=要求(“qs”);
axios。帖子(/广播/商品/get_goods_list_wechat, qs。stringify({“数据”:JSON.stringify ({
“isSingle”: 1、
“sbid”: 13729792,
“catalog3”: 45908012,
“抵消”:0,
“页大小”:25
}},{
标题:{
:“BBG-Key ab9ef204 - 3253 - 49 - d4 - b229 3 - cc2383480a6”,
}
}）
不要犹豫(函数(响应){//如果(response.data。代码==626){
console.log(响应);//}
})。抓住(函数(错误){
console.log(错误);
});
具体使用参考文档:https://github.com/mzabriskie/axios using-applicationx-www-form-urlencoded-format
注意:对于帖子请求,一般情况下,第一个参数是url,第二个参数是要发送的请求体的数据,第三个参数是对请求的配置。
另外:axios默认是application/json格式的,如果不适用q。stringify这种形式,即使添加了请求头最后的内容类型的形式还是json的。
对于帖子请求,我们也可以使用下面的jquery的ajax来实现:
. ajax({美元
url:“api/广播/商品/get_goods_list_wechat”,
数据:{
“数据”:JSON.stringify ({
“isSingle”: 1、
“sbid”: 13729792,
“catalog3”: 45908012,
“抵消”:0,
“页大小”:25
}）
},
beforeSend:函数(请求){
请求。setRequestHeader (“BBG-Key”、“ab9ef204 - 3253 - 49 - d4 - b229 3 - cc2383480a6”);
},
类型:“文章”,
数据类型:json,
成功:功能(数据){
console.log(数据);
},
错误:函数(错误){
console.log(错);
},
完成:函数(){
}
});
之前
显然,通过比较,可以发现,jquery的请求形式更简单一些,且jqury默认的数据格式就是应用程序/x-www-urlencoded,从这方面来讲会更加方便一些。
另外,对于两个同样的请求,即使都请求成功了,但是两者请求得到的结果也是不一样的,如下:
不难看到:使用axios返回的结果会比jquery的ajax返回的结构(实际的结果)多包装了一层,包括相关的配置,头、请求等。
对于得到请求,我个人还是推荐使用axios.get()的形式,如下所示:
axios。get(/广播/商店/get_classify, {
参数:{
席德:13729792
},
标题:{
:“BBG-Key ab9ef204 - 3253 - 49 - d4 - b229 3 - cc2383480a6”
}
}）
不要犹豫(函数(响应){
如果(response.data。代码==130){
项=response.data.data;
store.commit(“更新”,项目);
console.log(项目);
}
console.log (response.data.code);
})。抓住(函数(错误){
console.log(错误);
console.log(这个);
});
