接觸vue已經很長時間，也經常使用axios，但是原生封裝的方法都很難滿足日程開發的需求，所以這期就寫一下axios的封裝。

底部有完整代碼

1.前期準備

創建一個js文件，命名自定。我這里定義為request.js

import axios from 'axios'  //導入原生的axios 
import qs from 'qs';       //導入qs,做字符串的序列化，為了后面不同的場景使用。
import {
  MessageBox,
  Message
} from 'element-ui'            //引入element-ui的兩個組件，分別是消息框和消息提示         
import store from '@/store'    //引入狀態管理倉庫
import router from '@/router'  //引入路由

import {
  getToken
} from '@/utils/auth'          //根據業務需求，這個方法是用來獲取Token

2.創建實例

// 創建一個axios實例
const service = axios.create({
  baseURL: 'XXXXXX',         // url = base url + request url
  withCredentials: true,    // 當跨域請求時發送cookie
  timeout: 15000           // 請求時間
})

3.請求攔截器

在發送請求之前做些什么

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
    // 讓每個請求攜帶令牌——['Has-Token']作為自定義密鑰。
    // 請根據實際情況修改。
    config.headers['Has-Token'] = getToken()
    }
    //在這里根據自己相關的需求做不同請求頭的切換，我司是需要使用這兩種請求頭。
    if (config.json) {
      config.headers['Content-Type'] = 'application/json'
    } else {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
      config.data = qs.stringify(config.data);   //利用qs做json序列化
    }
    return config
  },
  error => {
    // 處理請求錯誤
    console.log(error) // 調試
    return Promise.reject(error)
  }
)

4.響應攔截器

在收到相應后做些什么

service.interceptors.response.use(
  response => {
    const res = response.data    //這是響應返回后的結果
    //在這里可以根據返回的狀態碼對存在響應錯誤的請求做攔截，提前做處理。

    //以下為我司的處理規則
    // 如果自定義代碼不是200，則判斷為錯誤。
    if (res.code == 200 || res.code == 300) {
      // 重新登陸
      MessageBox.confirm('您的登錄狀態存在問題，您可以取消以停留在此頁面，或再次登錄', '系統提示', {
        confirmButtonText: '重新登錄',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/resetToken').then(() => {
          location.reload();
        })
      })
      return
    } else {
      if (res.code == 700) {
        Message.warning('您沒有獲取請求的權限！')
        router.replace({
          path: '/401'
        })
        return
      } else {
        return res
      }
    }
    //end
  },
  error => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

5.拋出實例

export default service

6.如何調用

//以我司請求為例子
import request from '@/utils/request'

export function getCity(data) {
  return request({
    url: '/getCity/findParentId',
    method: 'post',
    data
  })
}

7.完整代碼

import axios from 'axios'
import qs from 'qs';
import {
  MessageBox,
  Message
} from 'element-ui'
import store from '@/store'
import router from '@/router'
import {
  getToken
} from '@/utils/auth'

// 創建一個axios實例
const service = axios.create({
  baseURL: 'XXXXX', 
  withCredentials: true, 
  timeout: 15000 
})

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
    // 讓每個請求攜帶令牌——['Has-Token']作為自定義密鑰。
    // 請根據實際情況修改。
    config.headers['Has-Token'] = getToken()
    }
    //在這里根據自己相關的需求做不同請求頭的切換，我司是需要使用這兩種請求頭。
    if (config.json) {
      config.headers['Content-Type'] = 'application/json'
    } else {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
      config.data = qs.stringify(config.data);   //利用qs做json序列化
    }
    return config
  },
  error => {
    // 處理請求錯誤
    console.log(error) // 調試
    return Promise.reject(error)
  }
)
service.interceptors.response.use(
  response => {
    const res = response.data    //這是響應返回后的結果
    //在這里可以根據返回的狀態碼對存在響應錯誤的請求做攔截，提前做處理。

    //以下為我司的處理規則
    // 如果自定義代碼不是200，則判斷為錯誤。
    if (res.code == 200 || res.code == 300) {
      // 重新登陸
      MessageBox.confirm('您的登錄狀態存在問題，您可以取消以停留在此頁面，或再次登錄', '系統提示', {
        confirmButtonText: '重新登錄',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/resetToken').then(() => {
          location.reload();
        })
      })
      return
    } else {
      if (res.code == 700) {
        Message.warning('您沒有獲取請求的權限！')
        router.replace({
          path: '/401'
        })
        return
      } else {
        return res
      }
    }
    //end
  },
  error => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

下期編寫一些簡單且常用的正則驗證方法。共勉！

• 本人博客地址：https://reinness.com 站點名稱：平凡的你我。 歡迎大家的到來！