import axios from 'axios'
import qs from 'querystring'

根據(jù)環(huán)境變量區(qū)分接口的默認(rèn)地址

switch (process.env.NODE_ENV) {
  case 'production':
    axios.defaults.baseURL = 'http://api.baidu.com'
    break
  case 'test':
    axios.defaults.baseURL = 'http://192.168.20.12:8080'
    break
  default:
    axios.defaults.baseURL = '/api'
}

設(shè)置超時(shí)時(shí)間和跨域是否允許攜帶憑證

axios.defaults.timeout = 10000
axios.defaults.withCredentials = true

設(shè)置請求傳遞數(shù)據(jù)的格式 (看服務(wù)器要求什么格式)(x-www-form-urlencoded)

axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.transformRequest = data => qs.stringify(data)

設(shè)置請求攔截器
客戶端發(fā)送請求 -> [請求攔截器] -> 服務(wù)器TOKEN校驗(yàn)(JWT): 接收服務(wù)器返回的token已慢，存儲(chǔ)到vuex/本地存儲(chǔ)中炒辉，每一次向服務(wù)器發(fā)請求，我們應(yīng)該把token帶上

axios.interceptors.request.use(
  config => {
    // 攜帶token
    let token = localStorage.getItem('token')
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

響應(yīng)攔截器
服務(wù)器返回信息 -> [攔截器統(tǒng)一處理] -> 客戶端JS獲取到信息

/* axios.defaults.validateStatus = status => {
  // 自定義響應(yīng)成功的HTTP狀態(tài)碼
  return /^(2|3)\d{2}$/.test(status)
} */
axios.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    let { response } = error
    if (response) {
      // 服務(wù)器最起碼返回結(jié)果了
      switch (response.status) {
        case 401: //=> 權(quán)限
          break
        case 403: //=> 服務(wù)器拒絕執(zhí)行(token過期)
          break
        case 404: //=> 找不到頁面
          break
      }
    } else {
      // 服務(wù)器連結(jié)果都沒有返回
      if (!window.navigator.onLine) {
        // 斷網(wǎng)處理：可以跳轉(zhuǎn)到斷網(wǎng)頁面
        return
      }
      return Promise.reject(error)
    }
  }
)

export default axios

CSDN：https://blog.csdn.net/weixin_45585996/article/details/107203358