Vue Axios二次封装

// axios二次封装
import axios from 'axios'
import qs from 'qs'

/***
 *判断环境变量区分接口的默认地址
 */
switch (process.env.NODE_ENV) {
  case 'production':
    axios.defaults.baseURL = 'http://api.zhouzha.cn'
    break
  case 'test' :
    axios.defaults.baseURL = 'https://192.168.109:2000'
    break
  default :
    axios.defaults.baseURL = 'http://127.0.0.1:3000'
}

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

/**
 * 设置请求传递数据的格式（看服务器要求）
 * x-www-form-urlencoded 格式  ==> xxx=xxx&xxx=xxx
 * 一般是post请求
 */
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
// qs.stringify()  将对象变成 xxx=xxx&xxx=xxx格式    qs.parse()  将xxx=xxx&xxx=xxx转换成对象
axios.defaults.transformRequest = data => qs.stringify(data)

/**
 * 请求拦截器
 * TOKEN校验（JWT）
 * 接收服务器返回token，存储到vuex/本地存储中，每一次向服务器发请求，我们应该把token带上
 * 当token失效时，把本地服务器清除调，再从服务器取
 */
axios.interceptors.request.use((config) => {
  // 携带token
  const token = localStorage.getItem('token')
  token && (config.headers.Authorization = token)
  return config
}, error => {
  return Promise.reject(error)
})

/**
 * 响应拦截器
 * 浏览器默认以2开头为成功，3开头为失败
 */
// 此设置一般不用设置 （设置以2或3开头为响应成功）
// axios.defaults.validateStatus = status => {
//   // 自定义响应成功的http状态码
//   return /^(2|3)\d{2}$/.test(status)
// }

axios.interceptors.response.use(response => {
  // 直接返回响应主体内容  （response里边还包含了data ，headers ,config ....）
  return response.data
}, error => {
  const { response } = error
  if (response) {
    //  服务器有返回结果
    // 对不同状态码进行不同处理
    switch (response.status) {
      case 401 : // 当前请求需要用户验证，一般是未登录（权限）
      // 进行一些操作，提示
        break
      case 403 : // 服务器已经解决请求，但是拒绝执行它 （一般是token过期,session过期）
        localStorage.removeItem('token')
        break
      case 404 : // 请求失败，请求所希望得到的资源未被在服务器上发现 .找不到页面(地址错误)
        break
    }
    return Promise.reject(error)
  } else {
    //  服务器没有返回结果 ：原因一：服务器崩了 。原因二 ：客户端没网
    if (!window.navigator.onLine) {
      // 断网处理：可以跳转断网页面
      return
    }
    return Promise.reject(error)
  }
})

export default axios