从零开始Vue3+Element Plus后台管理系统(十二)——封装Axios,取消重复请求

3,961 阅读4分钟

image.png

在过往的项目中,大部分Axios在项目搭建时就直接二次封装好了,拿来即用。满足通用需求是没有问题的,但碰到一些特别的接口返回,弱网场景,特别的产品需求,就觉得简单的封装不够用了。

实际上Axios非常强大,封装好了可以事半功倍,刚好今天趁此机会认真学习一下。

这次主要在基本封装基础上增加了取消请求和自定义错误提示。

基础工作

扩展AxiosRequestConfig接口,加入自定义的配置参数

declare module 'axios' {
  export interface AxiosRequestConfig {
    isReturnNativeData?: boolean  // 返回原始数据
    errorMode?: string       // 错误提示显示方式
    repeatRequest?: boolean // 允许重复请求
  }
}


返回原始数据/返回result

前端当然希望后端同学按照统一格式返回,但现实和理想总有差距。 为了灵活适配项目的实际情况,我们需要既可以统一处理返回的数据格式,也可以拿到整个响应进行额外的数据处理。

假设response是这样的,在理想情况下,只需要返回result到页面就可以了。剩下的错误提示交给axios统一处理。

{
    code:200,
    message:"success",
    result: []
}

如果碰到和前后端协作规范不同的,那么可以返回整个response.data,然后在SFC文件中处理数据和报错。

{
    data:null
}

可配置错误提示

默认:modal

可选:toast、hidden

image.png

errorHandler.ts, 在axios响应拦截器中使用

import { ElMessage, ElNotification } from 'element-plus'

// 根据错误代码,获取对应文字
const errorMsgHandler = (errStatus: number): string => {
  if (errStatus === 500) return '服务器内部错误'
  if ((errStatus = 400)) return '没有权限'
  return '未知错误'
}

// 根据mode,返回错误信息
const errorHandler = (errMsg: string, mode: string = 'modal') => {
  const msg = errMsg || '未知错误'

  if (mode === 'modal') {
    ElMessage(msg + '|' + mode)
  }
  if (mode === 'toast') {
    ElNotification({
      title: 'Error',
      message: msg,
      type: 'error'
    })
  }
  if (mode === 'hiden') {
  }
}

export { errorHandler, errorMsgHandler }

取消请求

实际工作中我们会遇到这几种场景:

  1. 当用户频繁发起请求时,由于网络返回延时,前一个请求可能比后一个更慢,页面显示结果可能不是最新的,
  2. APP列表,用户频繁点击搜索,可能会返回多条同样的数据,造成页面数据重复
  3. 即时搜索输入框,用户每次输入都会发起请求,请求过于频繁,造成性能问题

以上问题的解决办法也有不少,比如防抖,设置标志位...

AbortController

Axios提供了两个取消请求的API,AbortController和CancelToken,不过CancelToken deprecated API 从 v0.22.0 开始已被弃用,不应在新项目中使用。

Axios 的 cancel token API 是基于被撤销 cancelable promises proposal

此 API 从 v0.22.0 开始已被弃用,不应在新项目中使用。

从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 取消请求:

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

AbortController 接口表示一个控制器对象,允许你根据需要中止一个或多个 Web 请求。 AbortController.signal 返回一个 AbortSignal 对象实例,它可以用来 with/abort 一个 Web(网络)请求。

取消请求的思路

  1. 如果接口不允许重复请求,那么在请求拦截器中配置 AbortController,请求该接口时,拼接接口url和参数等信息保存到一个map中
  2. 再次请求该接口时,先判断map中是否存在同名key,如果存在key,则找到这个key的abortController,执行abort取消请求,反之在map中新增key
// 拼接请求的key
function getRequestKey(config: AxiosRequestConfig) {
  return (config.method || '') + config.url + '?' + qs.stringify(config?.data)
}

function setPendingMap(config: AxiosRequestConfig) {
  const controller = new AbortController()
  config.signal = controller.signal
  const key = getRequestKey(config)
  if (pendingMap.has(key)) {
    pendingMap.get(key).abort()
    pendingMap.delete(key)
  } else {
    pendingMap.set(key, controller)
  }
}

  1. 在响应拦截器中,如果map中存在接口的key,删除之。

二次封装axios的完整代码

import axios, { AxiosInstance, AxiosError, AxiosResponse, AxiosRequestConfig } from 'axios'
import { errorHandler, errorMsgHandler } from './errorHandler'

import qs from 'qs'

declare module 'axios' {
  export interface AxiosRequestConfig {
    isReturnNativeData?: boolean
    errorMode?: string
    repeatRequest?: boolean
  }
}

let pendingMap = new Map()

function getRequestKey(config: AxiosRequestConfig) {
  return (config.method || '') + config.url + '?' + qs.stringify(config?.data)
}

function setPendingMap(config: AxiosRequestConfig) {
  const controller = new AbortController()
  config.signal = controller.signal
  const key = getRequestKey(config)
  if (pendingMap.has(key)) {
    pendingMap.get(key).abort()
    pendingMap.delete(key)
  } else {
    pendingMap.set(key, controller)
  }
}

const service: AxiosInstance = axios.create({
  timeout: 1000 * 30,
  baseURL: import.meta.env.VITE_BASE_URL
})

service.interceptors.request.use(
  (config) => {
    if (!config.repeatRequest) {
      setPendingMap(config)
    }
    return config
  },
  (error: AxiosError) => {
    console.log(error)
    return Promise.reject()
  }
)

service.interceptors.response.use((response: AxiosResponse) => {
  const config = response.config
  const key = getRequestKey(config)
  pendingMap.delete(key)

  if (response.status === 200) {
    if (config?.isReturnNativeData) {
      return response.data
    } else {
      const { result, code, message } = response.data

      if (code === 200) {
        return result
      } else {
        errorHandler(message || errorMsgHandler(code), config.errorMode)
      }
    }
  } else {
    const errMsg = errorMsgHandler(response.status)
    errorHandler(errMsg, config.errorMode)
    Promise.reject()
  }
})

// 错误处理
service.interceptors.response.use(undefined, (e) => {
  errorHandler(e.response.status)
})

export default service

import request from '~/utils/http/axios'

export default {
  getDeptTree: (data: {}) => {
    return request({
      url: '/getDeptTree',
      method: 'post',
      data,
      repeatRequest: false,
      isReturnNativeData: true,
      errorMode: 'hidden'
    })
  }
}

本次只实现了取消重复请求,实际我们可能还会需要取消其他请求,仅在此抛砖引玉 ☕️

挖掘实际需求,继续完善我的Vue3项目⛽️

如果你有什么好的想法与建议,欢迎分享 👏