vue 工程的 axios 封装

基于axios 0.18.1 版本的请求模块封装

import axios from 'axios';
// 一些工具函数，不做额外解释
import {
  getToken,
  removeToken,
  getVersion,
  getIamFlag,
} from 'msp/utils/auth';
import { Message, MessageBox } from 'element-ui';
// 引入工具函数
import { getStorage, getBrowserLang } from 'msp/utils/localStorage';
// 基于 vue2.x 的 vuex封装变量，
import store from 'msp/store/modules/layout.js';
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 50 * 1000, // request timeout
  headers: { 'Cache-Control': 'no-cache' },
});
const logout_address = process.env.VUE_APP_SSO_ADDRESS;
// request interceptor
service.interceptors.request.use(
  config => {
    const token = getToken();
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token;
    }
    config.headers.timestamp = new Date().getTime();
    if (getIamFlag() && getVersion() && getVersion() !== 'null') {
      config.headers['ssoVersion'] = getVersion();
    }
    config.headers['Accept-Lang'] = getStorage('lang') || getBrowserLang();
    config.headers.langs = getStorage('lang');
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// response interceptor
service.interceptors.response.use(
  response => {
    const errorCodeWhiteList = store.state.customError; //来自页面接口业务相关的报错，该类型报错可能存在定制化处理的要求
    const portStr = response.config.url.split('/')[response.config.url.split('/').length - 1];
    const res = response.data;
    if (res) {
      res.response_headers = response.headers || {};
    }
    if (response.status === 200 && response.data && response.data.code !== '000000') {
      if (errorCodeWhiteList.includes(portStr)) {
        return Promise.reject(res);
      } else {
        if (response.data instanceof Blob) {
          if (response.data.type !== 'application/json') {// Blob 返回失败则响应类型为  application/json
            var obj = {
              data: res,
              name: response.headers['content-disposition'],
            };
            return obj; //如果接口返回的是Blob的也正常返回
          } else {
            return Message({
              duration: 1500,
              message: '系统异常，请稍后再试',
              type: 'error',
            });
          }
        }
        Message({
          message: response.data.mesg || '系统异常，请稍后再试',
          type: 'error',
          duration: 2 * 1000,
        });
        return Promise.reject(res);
      }
    } else if (response.status !== 200) {
      if (response.status == 204) {
      } else {
        Message({
          message: res.mesg || 'Error',
          type: 'error',
          duration: 5 * 1000,
        });
        return Promise.reject(new Error(res.message || 'Error'));
      }
    } else {
      return res;
    }
  },
  error => {
    if (error && error.response) {
      // 做断言  防止报错errs
      if (
        (error.response.status == '401' || error.response.status == '410') &&
        window.location.href.indexOf('/login') == -1
      ) {
        removeToken();
        const origin = location.origin;
        location.href = origin + '/login';
      } else if (error.response.status === '301') {
        console.log('301');
        
      } else {
        if (error && error.response) {
          Message({
            message: error.response.data.msg || error.response.data.mesg || error.response.data,
            type: 'error',
            duration: 2 * 1000,
          });
        } else {
          Message({
            message: error.message,
            type: 'error',
            duration: 2 * 1000,
          });
          return;
        }
      }
      return Promise.reject(error);
    } else if (error && error.code === 'ERR_NETWORK') {
      Message({
        message: '网络异常',
        type: 'error',
        duration: 2 * 1000,
      });
      return;
    }
  }
);

export default service;