axios的简单封装

import axios from 'axios'
import qs from 'qs'
// 配置环境
// let baseUrl = 'http://127.0.0.1:8080'
// let baseUrlArr = [
//   {
//     type: 'development',
//     url: 'http://127.0.0.1:8080'
//   },
//   {
//     type: 'test',
//     url: 'http://127.0.0.1:8080'
//   },
//   {
//     type: 'production',
//     url: 'http://127.0.0.1:8080'
//   }
// ]
switch (process.env.NODE_ENV) {
  case 'production':
    axios.defaults.baseURL = 'http://localhost:8080'
    break
  case 'test':
    axios.defaults.baseURL = 'http://localhost:8080'
    break
  default:
    axios.defaults.baseURL = 'http://localhost:8080'
}

// axios.defaults.baseURL = 'http://localhost:8080'
// axios.defaults.headers.commen['Authorization'] = '这是Token'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 超时时间和跨域是否允许携带凭证和请求头
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)// 方式和get明文一致，但是已经经过编码

// 拦截器 ,权限校验token,vuex->本地存储，发请求前
axios.interceptors.request.use(config => {
  // 携带token
  let token = localStorage.getItem('token')
  token && (config.headers.Authorization = token)
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use(respose => {
  // respose是一个对象有data，status，headers的返回
  return respose.data
}, error => {
  let {
    response
  } = error
  if (response) {
    // => 服务器起码返回了结果
    switch (response.status) { // 根据公司需要判断，一下可以跳页面，也可以弹消息
      case 401: // =>权限，可以判断是否登录
        break
      case 403: // =>token过期(一般)，拒绝请求
        break
      case 404: // =>找不到
        break
    }
  } else {
    // => 服务器连结果都没有返回
    if (!window.navigator.onLine) {
      // 断网页面
      return 0
    }
    return Promise.reject(error)
  }
})

export default axios

复制代码