使用axios可以统一做请求响应拦截,例如请求响应时我们拦截响应信息,判断状态码,从而弹出报错信息。请求超时的时候断开请求,还可以很方便地使用,或者抓来处理请求。
下载源码
npm安装axios——保存
<>强建立http。js文件
在/src/跑龙套/目录下建立一个htttp.js
1。首先导入axios和路由器。
从“进口axios axios ';
从“. ./路由器”进口路由器;
2。接着设置axios请求参数。
axios.defaults.timeout=5000;//请求超时5秒
axios.defaults.baseURL=";//请求基础url
axios.defaults.headers.post(“内容类型”)=坝τ贸绦?x-www-form-urlencoded”;//设置后请求是的头信息
如果你要用到会话验证码功能,让请求携带饼干,可以加上以下一行:
axios.defaults.withCredentials=true
3。然后,我们要给请求加个拦截器,就是在请求即将发送之前,我们需要给请求添加信息,比如下面的代码中,我们给请求添加头信息,标题中添加标记,这样每次请求都会在标题中携带令牌信息。这在我们的接口开发中经常用的到。
//http请求拦截器
axios.interceptors.request.use (
配置=比;{
让牌=sessionStorage.getItem(令牌)
如果(令牌){//判断是否存在令牌,如果存在的话,则每个http头都加上令牌
配置。头={
“X-token”:令牌
}
}
返回配置
},
呃=比;{
返回Promise.reject(错)
}
)
4。接下来,我们看下请求返回时的拦截器。
比如我们发送请求时,如果后端返回错误代码,则前端应该提示信息。比如后台返回没有权限,不允许访问,跳转到登录页,这些都可在拦截器上完成。
axios.interceptors.response.use (
响应=比;{
如果(response.data。代码===4003){
烤面包({
mes:“您没有权限操作!’,
超时:1500,
回调:()=比;{
router.go (1);
}
}）;
返回错误;
}
如果(response.data。代码===1){
localStorage.removeItem(令牌)
router.push ({
路径:“/登录”,
querry:{重定向:router.currentRoute.fullPath}//从哪个页面跳转
})
}
返回响应
},
呃=比;{
如果犯错。代码===' ECONNABORTED ',,err.message.indexOf(“超时”)!==1){
烤面包({
mes:“网络异常,连接超时…”,
超时:1500
}）;
}
返回Promise.reject(错)
}
)
5。现在我们来封装一个得到方法:
/* *
*封装得到方法
* @param url
* @param数据
* @returns{承诺}
*/导出功能得到(url, params={},头={}){
返回新的承诺((解决,拒绝)=比;{
axios.get (url, {
参数:参数,
标题:标题
})
不要犹豫(反应=比;{
解决(response.data);
})
.catch(呃=比;{
拒绝(err)
})
})
}
6。再封装一个发布方法:
/* *
*封装后请求
* @param url
* @param数据
* @returns{承诺}
*/导出功能发布(url, data=https://www.yisu.com/zixun/{}) {
返回新的承诺((解决,拒绝)=> {
axios。帖子(url,数据)
不要犹豫(响应=> {
解决(response.data);
},呃=> {
拒绝(err)
})
})
}
在main.js中引入:
从“进口{post、get}。/跑龙套/http”//定义全局变量
Vue.prototype。邮政=邮政美元;
Vue.prototype。获得=美元;
在组件中使用:
这一点。后美元(url参数)
不要犹豫((res)=比;{
如果(res.result==='成功'){
美元。消息({
消息:“登录成功!”
类型:“成功”
})
美元。router.push('/主要')
其他}{
美元。message.error (res.msg)
this.refreshCode ();
}
});
这段代码是用户登录发送帖子请求的代码示例,其他得到请求也是一样的处理方式。接下来我们会有文章具体讲解如何使用封装好的axios实现登录的例子,敬请关注。
