07月12, 2017

axios中拦截器的使用

由于前后分离,前端在异步发请求的过程中,可能会需要对所有发送的结果或者所有返回的结果都处理一些方法,为了方便,这时候拦截器就起到了关键的作用(总不能一个个每个都单独处理吧~)。

  • 添加请求拦截器
    axios.interceptors.request.use(functionconfig{
       //在发送请求之前做某事
       return config;
     },functionerror{
       //请求错误时做些事
       return Promise.reject(error);
     });
    
  • 添加响应拦截器

    axios.interceptors.response.use(functionresponse{
       //对响应数据做些事
        return response;
     },functionerror{
       //请求错误时做些事
       return Promise.reject(error);
     });
    
  • 特别注意
    进入axios.interceptors.response之前还会先进入Axios.defaults.transformResponsetransformResponse也允许对响应数据进行更改。
    这里transformResponseresponse的拦截器先进来,抛异常的话会进response拦截器的error(下面的fn2)。
    如果response的拦截器axios.interceptors.response.use(fn1, fn2)中fn1有异常,是不会进入fn2的;而transformResponse中抛异常是会进入fn2的,从而进入$http的.catch表明请求异常。 如果返回的数据正常,进入transformResponse之后,再进入fn1公共处理数据(也可以在transformResponse中公共处理数据),否则到fn2中对异常数据进行捕获处理

    Axios.defaults.transformResponse = [data => {
      if (!data) {
          return data;
      }
    
      let jsonData = data;
      if (typeof data === 'string') {
          try {
              jsonData = JSON.parse(data);
          } catch (e) {
              console.error(`parse error:${data}`);
          }
      }
    
      // TODO interceptors支持中断后下列代码请移至interceptors中
      if (jsonData.returnCode) {
          if (jsonData.returnCode === '00000000') {
              return jsonData;
          }
          throw jsonData;
      } else if (jsonData.success === true) {
          return jsonData;
      } else if (jsonData.success === false) {
          throw jsonData;
      }
    
      return jsonData;
    }];
    

本文链接:http://blog.hiraetho.com/post/axios-interceptor.html

-- EOF --

Comments