15. 基於Vue+Element+nodeJs+Express+MySql後臺管理系統-axios請求封裝以及接口統一管理

在src目錄下創建config目錄，並在此目錄下創建兩個文件http.js和interface.js，
其中http.js用來對axios請求進行封裝，interface.js用來對此項目中用到的接口進行統一封裝。

一、axios請求封裝http.js

1. axios 全局配置：

import axios from 'axios'
import store from '../store'
import router from '../router'
import common from '../assets/js/common.js'

axios.defaults.timeout = 180000
axios.defaults.baseURL = '/demo-weekly/back-end/api' // 測試接口域名
export const baseURL = axios.defaults.baseURL

2. 攔截器：

應用場景：

1：每個請求都帶上的參數，比如token，時間戳等。
2：對返回的狀態進行判斷，比如token是否過期

請求：

axios.interceptors.request.use((config) => {
  if (config.method == 'post') {
    config.headers['Content-Type'] = 'application/json'
    config.headers['token'] = store.state.userInfo.token
    config.data = JSON.stringify(config.data)
    return config
  }
}, (error) => {
  let str = error
  return common.toast(str, 'error', false)
})

響應：

axios.interceptors.response.use(response => {
  let code = response.data.code
  if (code && typeof (code) !== 'undefined') {
    if (code == 20) {
      router.replace({
        path: '/'
      })
    } else if (code !== -2 && code !== 1) {
      common.toast(response.data.message, 'error', false)
    }
  }
  return response
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = '錯誤請求'
        common.toast(err.message, 'error', false)
        break
      case 403:
        err.message = '拒絕訪問'
        common.toast(err.message, 'error', false)
        break
      case 404:
        err.message = '請求錯誤,未找到該資源'
        common.toast(err.message, 'error', false)
        break
      case 405:
        err.message = '請求方法未允許'
        common.toast(err.message, 'error', false)
        break
      case 408:
        err.message = '請求超時'
        common.toast(err.message, 'error', false)
        break
      case 502:
        err.message = '網絡錯誤'
        common.toast(err.message, 'error', false)
        break
      case 504:
        err.message = '網絡超時'
        common.toast(err.message, 'error', false)
        break
      default:
        err.message = '連接錯誤'
        common.toast(err.message, 'error', false)
    }
  } else {
    err.message = '連接到服務器失敗'
    common.toast(err.message, 'error', false)
  }
  return Promise.resolve(err.response)
})

3. 將axios實例暴露出去

export function http (url, params, responseType) {
  return new Promise((resolve, reject) => {
    let userId = store.state.userInfo.id
    if (userId && userId > 0) {
      params.userId = parseInt(userId)
    } else {
      params.userId = 0
    }

    if (!responseType || typeof (responseType) == 'undefined') {
      // 普通post請求
      axios.post(url, params)
      .then(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
    } else {
      // 導出下載文件
      axios.post(url, params, {
        responseType: responseType
      })
      .then(response => {
        resolve(response)
      }, err => {
        reject(err)
      })
    }
  })
}

二、接口統一管理interface.js

// 接口配置
export const userLogin = '/user/login' // 用戶登錄
export const userLogout = '/user/logout' // 用戶登出
export const userAdd = '/user/add' // 新增用戶
export const userUpdateInfo = '/user/updateInfo' // 更新用戶信息
export const userUpdateState = '/user/updateState' // 更新用戶狀態
export const userDetail = '/user/detail' // 獲取用戶詳情
export const userList = '/user/list' // 獲取用戶列表

export const weeklyAdd = '/weekly/add' // 新增週報
export const weeklyUpdateInfo = '/weekly/updateInfo' // 更新週報信息
export const weeklyUpdateState = '/weekly/updateState' // 更新週報狀態
export const weeklyDetail = '/weekly/detail' // 獲取週報詳情
export const weeklyList = '/weekly/list' // 獲取週報列表

三、項目體驗鏈接

週報管理系統體驗鏈接： https://www.17sucai.com/pins/35488.html

本人前端程序員，長期混跡於各種前端開發中，現在專門爲前端熱愛者建了個微信羣，和大家一起分享自己在工作、學習中遇到的技術知識或問題，還有各種資料和課程，各位感興趣的可以加入哦~