封装axios

import Axios from 'axios'
import { Message } from 'element-ui'
import Auth from './auth' //是利用cookie插件，封装的操作cookie的方法
import { Loading } from 'element-ui'
import router from '@/router'

// 使用Element loading动画
let loading
function startLoading() {
  loading = Loading.service({
    lock: true,
    text: '加载中……',
    background: 'rgba(0, 0,0, 0.6)'
  })
}
function endLoading() {
  loading.close()
}

Axios.defaults.baseURL = process.env.VUE_APP_BASE_API// baseURL
Axios.defaults.timeout = 100000// 设置请求超时

// 请求拦截器
Axios.interceptors.request.use(config => {
  startLoading()// loading开启
  // 在每次请求之前判断cookie中是否存在token,若存在在每一个请求header上都加上token
  const token = Auth.getToken()
  if (token) {
    config.headers.Authorization = token
  }
  return config
}, error => {
  endLoading()// loading关闭
  return Promise.error(error)
})

// 响应拦截
Axios.interceptors.response.use(
  response => {
    endLoading()// loading关闭
    if (response.data.meta.status_code === 200) {
      return Promise.resolve(response)
    } else {
      switch (response.data.meta.status_code) {
        case 420:
          Message({
            message: '用户名或密码错误',
            type: 'error',
            duration: 5 * 1000
          })
          break
        case 403:
          Message({
            message: '请重新登录',
            type: 'error',
            duration: 5 * 1000
          })
          Auth.removeToken()
          localStorage.removeItem('vuex')
          localStorage.removeItem('admins_info')
          router.push(`/login`)
          break
        // 其他错误，直接抛出错误提示
        default:
          Message({
            message: response.data.error || response.data.meta.message,
            type: 'error',
            duration: 5 * 1000
          })
      }
      return Promise.reject(response)
    }
  }, error => {
    endLoading()// loading关闭
    return Promise.reject(error)
  }
)

/**
 * get方法，对应get请求
 * @param {String} url 请求的url地址
 * @param {Object} params 请求时携带的参数
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    Axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  }).catch((err) => {
    console.log('catch-err', err)
  })
}

/**
 * post方法，对应post请求
 * @param {String} url 请求的URL地址
 * @param {Object} params 请求时携带的参数
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    Axios.post(url, params)
      .then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err.data)
      })
  }).catch((err) => {
    console.log('catch-err', err)
  })
}

auth.js

import Cookies from 'js-cookie'

const KEY = 'te_token'
const authToken = {
//获取cookie
  getToken: function() {
    return Cookies.get(KEY)
  },
//设置cookie
  setToken: function(token) {
    Cookies.set(KEY, token)
  },
//移除cookie
  removeToken: function() {
    Cookies.remove(KEY)
  }
}
export default authToken

详情见：https://www.cnblogs.com/chaoyuehedy/p/9931146.html
其他参考文章：https://www.html.cn/qa/react/14268.html
https://www.jianshu.com/p/e59aa71e1840
https://blog.csdn.net/chf1142152101/article/details/107099403/