在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于承诺的http库,可运行在浏览器端和node . js中。他有很多优秀的特性,例如拦截请求和响应,取消请求,转换json,客户端防御cSRF等,所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文档。
安装
<代码> npm安装axios;//安装axios
好了、下面开始今天的正文。
此次封装用以解决:(对于登录功能的可以直接使用,其他网络请求也可以直接用,如果有洁癖,可以把令牌有关的几行代码删掉)
ps:使用时得的引入axios时:进口axios”这个文件的名字及相对路径”
<李>接受后台标记
<李>文章参数自动转换,省略qs.stringify()
<李>后台牌过期之后自动清除本地数据,以便下次再次输入账号密码李
<李>更好的错误提示信息李
/* *
*封装网络请求
*/从“进口axios axios”
进口qs“属性”
从“. ./商店”进口商店
从“. ./路由器”进口路由器//标记过期之后重新回登录界面
const toLogin=()=祝辞{
router.push("/登录”)
}//错误信息响应方法
const errroHandle=(状态、其他)=比;{
开关(状态){
400年情况:
console.log(“服务器无法理解请求信息”);
打破;
401年情况:
console.log(“用户信息验证失败”);
localStorage.removeItem(“令牌”);//可选的项
toLogin ();
打破;
403年情况:
console.log(“请求被限制”);
localStorage.removeItem(“令牌”);//可选的项
toLogin ();
打破;
404年情况:
console.log(“客户端请求信息错误”);
打破;
默认值:
console.log(其他);
打破;
}
}//创建axios对象
const实例=axios.create ({
超时:5000
})//挂在全局对象
instance.defaults.baseUrl=" ";
instance.defaults.headers.post(“内容类型”)=坝τ贸绦?x-www-form-urlencoded”;//拦截器:请求拦截和响应拦截后请求参数需要转码//axios的返回值对象要求是一个承诺对象
instance.interceptors.request.use (config=祝辞{
如果(配置。方法===皃ost”) {
配置。data=https://www.yisu.com/zixun/qs.stringify (config.data)
}
如果(store.state.token) {
config.headers。授权=store.state.token;
}
返回配置;
},错误=> Promise.reject(错误)
instance.interceptors.response.use (//成功
响应=>响应。状态===200 ?Promise.resolve(反应):Promise.reject(反应),//失败
错误=> {
const{响应}=错误;
如果(响应){
errroHandle (response.status response.data)
返回Promise.reject(响应)
其他}{//错误信息都无法返回
console.log(“请求被中断”);
}
}
）
出口默认实例
以上所述是小编给大家介绍的封装一下vue中的axios示例代码详解,希望对大家有所帮助!
