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

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 小拾岁月
扫码：