拦截器
什么拦截器？
在请求前或响应被处理前拦截他们，分为两种：请求拦截器与响应拦截器
拦截器的使用方法
- 请求拦截器
// 请求拦截器
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）仍未获取数据，这个时候需要取消请求。