三、VUEプロジェクトBaseCmsシリーズ文章:axiosのパッケージ

プロジェクト開発にはajaxが不可欠であり、良いパッケージは私たちの多くの重複コードを減らすことができ、メンテナンスも便利です.vue開発で私たちが多く使っているのはaxiosです.次のコードは、プロジェクトで使用されるaxiosのパッケージです.
http.js

/**
 *   : axios  ，    
 */

import axios from 'axios'
import router from '../router'
import { Message } from 'element-ui'

//   
const tip = msg => Message.error(msg)

//       
const toLogin = () => {
  router.replace({
    path: '/login',
    query: { redirect: router.currentRoute.fullPath }
  })
}

//       
const errorHandle = (status, other) => {
  switch (status) {
    //    ，   
    case 401:
      toLogin()
      break

    //     ，  token，      
    case 403:
      tip('    ，     ！')
      localStorage.removeItem('token')
      setTimeout(() => { toLogin() }, 1000)
      break

    //      
    case 404:
      tip('        ！')
      break

    //      
    default:
      console.log(other)
  }
}

//     
let instance = axios.create({
  timeout: 6000,
  headers: { 'Content-Type': 'application/json' }
})

//      
instance.interceptors.request.use(
  config => {
    //        ，        token         
    //     token  ，    token    ，            token
    //        token         ，            
    //              ，              。
    const token = localStorage.getItem('token')
    token && (config.headers.Authorization = token)
    return config
  },
  error => Promise.error(error)
)

//      
instance.interceptors.response.use(
  //     
  res => {
    if (res.data.code === 200) {
      return Promise.resolve(res)
    } else {
      tip(res.data.message)
      return Promise.reject(res)
    }
  },

  //     
  error => {
    const { response } = error
    if (response) {
      //      ，       2XX    
      errorHandle(response.status, response.data.message)
      return Promise.reject(response)
    } else {
      tip('     ，     ！')
      return Promise.reject(error)
    }
  }
)

export default instance

 
注意:
1.上記のコードは、エラーメッセージを提示するためにelementuiフレームワークのMessage構築に依存する
2.インスタンスオブジェクトinstanceにbaseUrlを構成しないのは、複数の異なるサービスがある場合を防ぐためです.