axios 的拦截器理解与使用

第一步创建实例

1 2 3 4

let  http = axios.create({ // 这个里面可以设置一些请求头之类的配置<br>timeout: 3000, headers: {} });

第二步 设置拦截器

 　2.1 拦截器分为 请求拦截器和响应拦截器 

   //请求拦截器代码格式如下

http.interceptors.request.use(config => {

     config.data = config.data || {};

     // 可以在这里添加全局统一的关卡  比如说token userid等等   

     // 判断是否拥有登录有则添加到请求参数中去 也就是 data中去  这样只要请求就会带   

         userid 与token，就不需要再在每个接口中写全局统一的参数

     if  (hastoken) {

     // config.data["userId"] = store.getters.userId;

     // config.data["token"] = store.getters.token;

     }

     // 这里同上 也可以在headers中添加配置

      if (hasgps){

      config.headers.xxx = xxx;

     }

     // 然后config.data需要格式化一下

     //qs.stringify 是把一个参数对象格式化为一个字符串。

    // qs.parse 方法可以把一段格式化的字符串转换为对象格式

     config.data = qs.stringify(config.data);

    //  最后return config

     return  config;

});   

    

 上述config对象

//响应拦截器代码　

http.interceptors.response.use( response => {
    //拦截响应，做统一处理 
    const res = response.data;
    // 请求成功,但是接口报错
    if (!res.result) {
    // 根据返回的错误码可以做一些响应的处理
      if (res.errorCode === 10001) {
      // 处理代码
      } else if (res.errorCode === 90000) {
      // 处理代码
      }
     // 没有响应代码处理  可以返回一个Promise对象
      return Promise.reject({
        code: res.errorCode,
        msg: res.txtMessage
      });
    } else {
      return res;
    }
  },
   // 请求失败在error中显示出来 并返回错误
   // 请求拦截其中也有error  一般用不到
  error => {
    Notify({
      message: "服务端连接异常",
      color: "#FFFFFF",
      background:#FF4023"
    });
    return Promise.reject(error);
  }
);

 

 上述response对象

第三步 最后暴露实例

   export default http;

第四步  引入并使用

  import request from "@/utils/request";
    request({
    url: "/auth/get-captcha",
    method: "post",
    data: data
    });    

---

 

详情见axios github  https://github.com/axios/axios

 

原文地址：https://www.cnblogs.com/xy1996/p/13466484.html