Vue Axios的再封装

280 阅读1分钟
/* --- === Axios packaging === --- */
import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
import router from '../router'

const Axios = axios.create({
  baseURL: 'https://*********.com',
  timeout: 9000,
  responseType: 'json',
  /* --- === 表示跨域请求时是否需要使用凭证 cookie === --- */
  // withCredentials: 'true',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  }
})

/* --- === Axios 請求攔截器 === --- */
Axios.interceptors.request.use(
  config => {
    if (config.method === 'post') {
      config.data = qs.stringify(config.data)
    }
    /* --- === 鉴权Token 存入Authorzation === --- */
    if (localStorage.token) {
      config.headers.Authorzation = localStorage.token
    }
    return config
  },
  error => {
    Message({
      showClose: true,
      message: error && error.data.error.message,
      type: 'error'
    })
    return Promise.reject(error.data.error.message)
  }
)

/* --- === Axios 響應攔截器 === --- */
Axios.interceptors.response.use(
  res => {
    if (res.status === 200) {
      switch (res.data.code) {
        case 0:
          return res.data.data && Promise.resolve(res)
        case 100:
          return hint('Wrong Operation !', 'warning')
        case 401:
          return hint('Login Failure, Please Login Again !', 'error', true)
        case 403:
          return hint('No Operation Permission !', 'warning')
        case 404:
          return hint('Access address does not exist !', 'error')
        case 500:
          return hint('Request Failed !', 'warning')
        default:
          hint('Unknown Error !', 'error')
      }
    } else {
      return Promise.reject(res)
    }
  },
  error => {
    if (window.localStorage.getItem('loginUserBaseInfo')) {
      hint('Login failure, Please login again', 'error', true)
    } else {
      switch (error.response.status) {
        case 404:
          hint('Request Address Error !', 'error')
          break
        case 503:
          hint('Service Unavailable !', 'error')
          break
        default:
          hint('Unknown Error !', 'error')
      }
    }
    return Promise.reject(error.response)
  }
)

/* --- === Export axios alias $http === --- */
export default {
  install: function (Vue, Option) {
    Object.defineProperty(Vue.prototype, '$http', {value: Axios})
  }
}

/* --- === Hint info === --- */
function hint ($message, $type, $error = null) {
  Message({
    showClose: true,
    message: $message,
    type: $type
  })
  if ($error) {
    setTimeout(() => {
      router.push({
        path: '/login'
      })
    }, 3000)
  }
}