axios请求统一封装

/**
 * axios封装
 * 请求拦截、响应拦截、错误统一处理
 */
import axios from 'axios'
import {errorHandle} from './errorMsg'
import {Message} from 'element-ui'
import constant from '../common/constant'
import util from '../common/util'

// 创建axios实例
let instance = axios.create({
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

/**
 * 请求拦截器
 * 每次请求前，如果存在token则在请求头中携带token
 */
instance.interceptors.request.use(
  (config) => {
    // 登录流程控制中，根据本地是否存在token判断用户的登录情况
    // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
    // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
    // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
    let token = util.getCookieKey(constant.common.cookieKeyConst.tokenKey)
    if (!token && util.isLocalhost()) {
      token = '123456'
    }
    // 设置请求头
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  (error) => {
    Promise.error(error)
  })

/**
 * 响应拦截器
 */
instance.interceptors.response.use(
  // 请求成功
  (res) => {
    const STATUS_OK = 200
    const STATUS_NO_DATA = 5
    // 返回结果不为200，则直接不处理
    if (res.status !== STATUS_OK) {
      return Promise.reject(res)
    }

    // 只处理code 为0的情况
    const resCode = res.data.code
    // 如果是正常数据返回，则直接返回json格式中的data
    if (resCode !== undefined) {
      switch (resCode) {
        case 0:
          return res.data
        // 无数据
        case STATUS_NO_DATA:
          return res.data
        default:
          Message.info({
            showClose: true,
            dangerouslyUseHTMLString: true,
            duration: 5000,
            offset: 220,
            message: '<div style="margin: 5px;"><p><strong>数据请求失败，原因：</strong></p><p style="margin: 10px 0;">' + res.data.msg + ' </p></div>'
          })
          // showErrorMsg('请求数据失败：' + res.data.msg)
          return Promise.resolve(res.data)
      }
    } else { // 否则是excel导出等非json格式返回，
      return Promise.resolve(res)
    }
  },
  // 请求失败
  (error) => {
    const {response} = error
    if (response) {
      // 请求已发出，但是不在2xx的范围
      errorHandle(response.status, response.data.message)
      return Promise.reject(response)
    } else {
      // 处理断网的情况
      // eg:请求超时或断网时，更新state的network状态
      // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
      // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
      errorHandle(10000, '请求超时')
      return Promise.reject(response)
    }
  })

export default instance