Axios学习(4)---axios拦截器、错误处理与取消请求

傷城~ 2021-08-03 00:05 668阅读 0赞

### Axios学习(4)—axios拦截器、错误处理与取消请求 ###

#### 一、拦截器 ####

1.  什么拦截器？
    
    在请求前或响应被处理前拦截他们，分为两种：请求拦截器与响应拦截器
2.  拦截器的使用方法
    
     *  请求拦截器
    
        // 请求拦截器
            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)
3.  实用举例A：登录权限
    
     *  需要token的接口实例
    
        // 需要token的接口
            let instance = axios.create({ });
            instance.interceptors.request.use(config=>{ 
                config.headers.token = '';
                return config
            })
    
     *  不需要token的接口实例
    
        // 不需要token接口
            let newInstance = axios.create({ });
4.  实用举例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** 小拾岁月  
扫码：  
![20200622115352592.jpg][]

[20200622115352592.jpg]: /images/20210802/8b55494d530a4c439acd50f3c2151a06.png