Axios拦截器、错误处理与取消请求
1、拦截器
什么是拦截器？
在请求前或响应被处理前拦截他们，分为两种：请求拦截器与响应拦截器。
拦截器的使用方法
请求拦截器
// 请求拦截器 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的接口实例
let instance = axios.create({ }); instance.interceptors.request.use(config=>{ config.headers.token = ''; return config })
不需要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动画。
2、错误处理，拦截
结合请求拦截器与响应拦截器来说，不管是请求错误还是响应错误，都会执行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方法。
3、取消请求（不常用）
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）仍未获取数据，这个时候需要取消请求。
