Axios学习(4)—axios拦截器、错误处理与取消请求
一、拦截器
-
什么拦截器?
在请求前或响应被处理前拦截他们,分为两种:请求拦截器与响应拦截器
-
拦截器的使用方法
- 请求拦截器
// 请求拦截器 axios.interceptors.request.use(config => { // 在发送请求前做些什么 return config; }, err=>{ // 在请求错误的时候的逻辑处理 return Promise.reject(err) });
- 响应拦截器
// 响应拦截器 axios.interceptors.response.use(res => { // 在请求成功后的数据处理 return res; }, err=>{ // 在响应错误的时候的逻辑处理 return Promise.reject(err) });
- 取消拦截器
let inter = axios.interceptors.request.use(config=>{ config.header={ auth:true } return config }) axios.interceptors.request.eject(inter)
-
实用举例A:登录权限
- 需要token的接口实例
// 需要token的接口 let instance = axios.create({}); instance.interceptors.request.use(config=>{ config.headers.token = ''; return config })
- 不需要token的接口实例
// 不需要token接口 let newInstance = axios.create({});
-
实用举例B:移动端开发数据加载loading动画
// 请求的加载动画loading let instance_phone = axios.create({}); instance_phone.interceptors.request.use(config=>{ $('#loading').show(); return config }) instance_phone.interceptors.response.use(res=>{ $('#loading').hide(); return res })
备注:实现的效果是请求数据的时候显示loading动画,数据响应后隐藏loading动画。
二、错误处理
结合请求拦截器与响应拦截器来说,不管是请求错误还是响应错误,都会执行catch方法。
// 请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求前做些什么
return config;
},
err => {
// 在请求错误的时候的逻辑处理
return Promise.reject(err);
}
);
// 响应拦截器
axios.interceptors.response.use(
res => {
// 在请求成功后的数据处理
return res;
},
err => {
// 在响应错误的时候的逻辑处理
return Promise.reject(err);
}
);
axios
.get("data.json")
.then(res => {
console.log(res);
})
.catch(err => {
console.log(res);
});
三、错误处理举例
在实际开发中,不会再每次网络请求的时候,使用catch方法,可以添加统一的错误处理方法。代码如下:
// 请求错误处理
let instance = axios.create({});
instance.interceptors.request.use(
config => {
return config;
},
err => {
// 请求错误的常见状态码:4XX 401-请求超时 404-mot found
$("#error").show();
setTimeout(()=>{
$("#error").hide();
}, 2000)
return Promise.reject(err);
}
);
// 响应错误处理
instance.interceptors.response.use(
res => {
return res;
},
err => {
// 响应错误的常见状态码 5XX 500-服务器错误 502-服务器重启
$("#error").show();
setTimeout(()=>{
$("#error").hide();
}, 2000)
return Promise.reject(err);
}
);
instance.get("/data.json").then(res=>{
console.log(res,'请求成功')
}).catch(err=>{
console.log(err,'除了拦截器设置的处理之外的其他处理')
})
思路分析:首先创建实例,给实例设置请求拦截器与响应拦截器。
-
(1)请求错误的常见状态码以4开头,如401-请求超时、404-接口未找到;
-
(2)响应错误的常见状态码以5开头,如500-服务器错误、502-服务器重启等。
-
(3)处理设置请求拦截器与响应拦截器的操作外,如果还要其他操作,我们可以在请求的时候,在使用catch方法。
四、取消请求(不常用)
- 代码示例:
let source = axios.CancelToken.source();
axios
.get("/data.json", {
cancelToken: source.token
})
.then(res => {
console.log(res);
}).catch(err=>{
console.log(err)
})
// 取消请求(参数msg)
source.cancel('自定的的字符串可选')
- 应用场景
在查询数据的时候,很长时间(3-5s)仍未获取数据,这个时候需要取消请求。
6. 温馨提示
更多博文,请关注:xssy5431 小拾岁月
扫码: