封装axios

// @/utils/request.js
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store' // 此处主要是管理token
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 由.env文件配置
  timeout: 10000, // request timeout
  headers: {
   'Content-type': 'application/json'
  }
})

// request interceptor
service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      config.headers['token'] = getToken()
    }
    return config
  },
  (error) => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  (response) => {
   	  const res = response.data
      return res
    }
  },
  (error) => {
    const { message, response } = error
    if (response && response.status) {
      switch (response.status) {
        // 401无token
        case 401:
        case 403:
          MessageBox.alert('登录态已失效，请重新登录', '确认退出登录', {
            confirmButtonText: '确定',
            callback: () => {
              store.dispatch('user/resetToken').then(() => {
                location.reload()
              })
            }
          })
          break
          // 404请求不存在
        case 404:
          Message({
            message: '网络请求不存在',
            type: 'error',
            duration: 5 * 1000
          })
          break
          // 502服务器异常
        case 502:
        case 500:
          Message({
            message: '服务器异常',
            type: 'error',
            duration: 5 * 1000
          })
          break
          // 其他错误，直接抛出错误提示
        default:
          Message({
            message: error.response.data.message,
            type: 'error',
            duration: 5 * 1000
          })
      }
      return Promise.reject(response)
    } else {
      Message({
        message,
        type: 'error',
        duration: 5 * 1000
      })
    }
    return Promise.reject(error)
  }
)

export default service


使用
import request from '@/utils/request'
// 登录接口
export function login(data) {
  return request({
    url: '/web/login',
    method: 'post',
    data
  })
}
// 获取用户信息
export function getInfo(params) {
  return request({
    url: '/web/userInfo',
    method: 'get',
    params
  })
}
// 下载接口(二进制流需要添加responseType)
export function downLoad(params) {
  return request({
    url: '/web/download',
    method: 'get',
    responseType: 'blob',
    params
  })
}