合理添加攔截器、明確API設(shè)計(jì)的好處：

• 統(tǒng)一管理接口
• 減少參數(shù)重傳
• 規(guī)范前端開發(fā)
• 提升開發(fā)效率

合理設(shè)計(jì)攔截器

import axios from 'axios'
import Router from '@/router'
import { Notification } from 'element-ui'
// 獲取全局baseURL
const baseUrl = window.g.baseURL
// 設(shè)置axios默認(rèn)URL
axios.defaults.baseURL = baseUrl
// 對(duì)token添加過期處理
export default async (url, data) => {
  let res
  // 判斷是否需要有下載設(shè)置
  if (data.isBlob === 1) {
    res = await axios.post(url, data, { responseType: 'blob' })
  } else {
    res = await axios.post(url, data)
  }
  // access_token過期，返回登錄頁
  if (res.data.res === 1100) {
    Notification.error({
      title: '錯(cuò)誤',
      message: res.data.msg,
      duration: 1500
    })
    Router.push('/')
  } else if (res.data.res !== 0 && !data.isBlob) {
    // 返回值不為0且不是下載文件時(shí)(下載文件時(shí)返回二進(jìn)制流，沒有res)，提示用戶錯(cuò)誤信息
    Notification.error({
      title: '錯(cuò)誤',
      message: res.data.msg,
      duration: 1500
    })
  }
  return res
}

// 一、請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
  // 攔截器處理（這里使用FormData傳參，并簡(jiǎn)單添加token）
  const fm = new FormData()
  if (config.data) {
    // 添加access_token
    if (sessionStorage.access_token) {
      fm.append('access_token',sessionStorage.access_token)
    }
  config.data = fm
  return config
}, function (error) {
  // 對(duì)請(qǐng)求錯(cuò)誤做些什么
  Notification.error({
    title: '系統(tǒng)錯(cuò)誤',
    message: '服務(wù)器連接失敗',
    duration: 1500
  })
  return Promise.reject(error)
})
// 二、響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
  Notification.error({
    title: '系統(tǒng)錯(cuò)誤',
    message: '服務(wù)器連接失敗',
    duration: 1500
  })
  return Promise.reject(error)
})

統(tǒng)一設(shè)計(jì)管理API

import axios from './axios'

const SUPERKET= 'superket'

// 登錄
const ADMIN = '/admin'
export const adminLogin = (data) => axios(SUPERKET+ ADMIN + '/login', data)
// 管理員管理
export const adminList = (data) => axios(SUPERKET+ ADMIN + '/list', data)
export const adminAdd = (data) => axios(SUPERKET+ ADMIN + '/add', data)
export const adminEdit = (data) => axios(SUPERKET+ ADMIN + '/changePassword', data)
export const adminDel = (data) => axios(SUPERKET+ ADMIN + '/del', data)

// 系統(tǒng)設(shè)置
const SYSTEM = '/system'
export const systemList = (data) => axios(SUPERKET+ SYSTEM + '/list', data)
export const systemEdit = (data) => axios(SUPERKET+ SYSTEM + '/edit', data)

// 人員管理
const MEMBER = '/member'
export const memberList = (data) => axios(SUPERKET+ MEMBER + '/list', data)
export const memberAdd = (data) => axios(SUPERKET+ MEMBER + '/add', data)
export const memberEdit = (data) => axios(SUPERKET+ MEMBER + '/edit', data)
export const memberDel = (data) => axios(SUPERKET+ MEMBER + '/del', data)

附錄

項(xiàng)目目錄示意圖

未完待續(xù)