Vue中Axios的二次封装和API接口管理规范

在SRC目录下新建request文件，新建index.js管理请求

根据环境变量区分接口的默认地址

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

/*
 *#根据环境变量区分接口的默认地址
 */
switch (process.env.NoDE_ENV) {
  case 'production':
    axios.defaults.baseURL = 'http://xxx'
    break
  case 'test':
    axios.defaults.baseURL = 'http://xxx'
    break
  default:
    axios.defaults.baseURL = 'http://xxx'
}

设置超时时间和跨域是否允许携带凭证

/*
 *设置超时时间和跨域是否允许携带凭证
 */
axios.defaults.timeout = 10000
axios.defaults.withCredentials = true

设置请求传递数据的格式

/*
 *设置请求传递数据的格式
 *(看服务器要求什么格式)
 */
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.transformRequest = data => qs.stringify(data)

设置请求拦截器

/*
 *设置请求拦截器
 *TOKEN校验(JWT):接收服务器返回的token，存储到vuex/本地
 *每一次想服务器发请求，我们应该吧token带上
 */
axios.interceptors.request.use(config => {
  // ^携带上token
  let token = localStorage.getItem('token')
  token && (config.headers.Authorization = token)
  return config
}, error => {
  return Promise.reject(error)
})

响应拦截器

/*
 *响应拦截器
 *服务器返回信息 - [拦截的统一处理] - 客户端JS获取到信息
 */
axios.interceptors.response.use(response => {
  return response.data
}, error => {
  let { response } = error
  if (response) {
    //* =>服务器返回结果了
    switch(response.status) {
      // ^自定义响应成功的HTTP状态码
      case 401: // ^权限问题
        break
      case 403: // ^服务器拒绝执行(token过期)
        break
      case 404: // ^找不到页面
        break  
    }
  } else {
    //* =>服务器结果没有返回
      if (!window.navigator.onLine) {
        // *断网处理：跳到断网页面
        return
      }
      return Promise.reject(error)
  }
})

export default axios