Vue axios封装一

我们搭建一个Vue前端系统时，必须对axios封装，

第一步：请求过滤，添加token

axios.interceptors.request.use(config => {
     LoadingBar.start();
    let method = config.method.toLocaleLowerCase();

    if (method === 'post') {
      config.params = processParam(config.params);
      let user = getUser();
      user && user.access_token && (config.params['access_token'] = user.access_token);
      return config;
    }

    if (method === 'get') {
      config.params = config.params || {};
      let user = getUser();
      user && user.access_token && (config.params['access_token'] = user.access_token);
      return config;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

　　

export const requestInterceptors = config => {
  setHeader(config.headers)

  if (config.method.toLowerCase() === 'get') {
    config.params = processParams(config.params)
  } else {
    // 解决后端需要form-data形式传参问题
    config.data = qs.stringify(processParams(config.data))
  }

  return config
}

　　

 axios.interceptors.request.use(requestInterceptors)

第二步：回调过滤

axios.interceptors.response.use(response => {
    return response.data;
  },
  error => {
    LoadingBar.error();
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 返回 401 清除token信息并跳转到登录页面
          Storage.removeAll(true);
          router.replace({
            path: 'login',
          });

          break;
        case 500:
          // 返回 500
          Message.error(CONSTANT.HTTP_STATUS.SERVER_ERROR.MSG);
          break;
      }
    }
    return Promise.reject(error)
  }
);

//请求拦截器

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

// LoadingBar.start();

let method = config. method. toLocaleLowerCase();

if ( method === 'post') {

config. params = processParam( config. params);

let user = getUser();

user && user. access_token && ( config. params[ 'access_token'] = user. access_token);

return config;

}

if ( method === 'get') {

config. params = config. params || {};

let user = getUser();

user && user. access_token && ( config. params[ 'access_token'] = user. access_token);

return config;

}

return config;

},

error => {

return Promise. reject( error);

}

);