vue-cli axios 请求封装(调用接口时长,错误码处理,接口返回参数判断统一处理)

参考大佬git:https://github.com/Nirongxu/nodePlatform-eggjs/blob/master/vue-xuAdmin/src/axios/index.js

/**
 * Created by WebStorm.
 * User: nirongxu
 * Date: 2019-01-02
 * Description: 文件描述
 */
import axios from 'axios'
import Cookies from 'js-cookie'
import { Message } from "element-ui";
// axios默认配置
axios.defaults.timeout = 10000;   // 超时时间
axios.defaults.baseURL = process.env.API_HOST;
console.log(axios.defaults.baseURL);
// 路由请求拦截
// http request 拦截器
axios.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=UTF-8';
    if (Cookies.get('access_token')) {
      //用户每次操作,都将cookie设置成半小时
      // Cookies.set('access_token', Cookies.get('access_token') ,{ expires: 7 });
      config.headers.Authorization = "Bearer" + Cookies.get('access_token')
    }
    return config;
  },
  error => {
    return Promise.reject(error.response);
  });

// 路由响应拦截
// http response 拦截器
axios.interceptors.response.use(
  response => {
    // 接口返回的数据,根据需求自行处理(可打印response 看结果)
    if (response.data.code === 11000) {
      // Message({
      //   message: '长时间未操作,请重新登录',
      //   type: 'warning'
      // });
      Cookies.set('access_token', response.data.message ,{ expires: 7 });
      // Cookies.remove('access_token');
      setTimeout(() => {
        location.reload()
      }, 500)
      return Promise.reject()
    }else if(response.data.code === 10000){
      Message({
        message: response.data.message,
        type: 'warning'
      });
      return Promise.reject(response)
    }else {
      return Promise.resolve(response);
    }
  },
// 请求接口错误时抛出
  error => {
    if (error.response.status === 404) {
      Message({
        message: '请求地址出错',
        type: 'warning'
      });
    }else if (error.response.status === 401) {
      Message({
        message: error.response.data.message,
        type: 'warning'
      });
      Cookies.remove('access_token');
      setTimeout(() => {
        location.reload()
      }, 3000)
      return false
    }
    return Promise.reject(error.response)   // 返回接口返回的错误信息
  });
export default axios;

你可能感兴趣的:(vue-cli axios 请求封装(调用接口时长,错误码处理,接口返回参数判断统一处理))