三、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，是爲了防止有多個不同服務的情況。