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

Axios学习(4)—axios拦截器、错误处理与取消请求一、拦截器什么拦截器？在请求前或响应被处理前拦截他们，分为两种：请求拦截器与响应拦截器拦截器的使用方法请求拦截器//请求拦截器axios.interceptors.request.use(config => {// 在发送请求前做些什么return confi...

CHH5431

8950人浏览 · 2019-09-28 17:17:17

CHH5431 · 2019-09-28 17:17:17 发布

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('自定的的字符串可选')