关于 vue3 axios的封装，并发请求相关

简介
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

请求方法别名
为了方便起见，axios为所有支持的请求方法提供了别名（配置项在这里就不多做介绍，官网都有axios）:

axios(config)

axios.request(config)

axios.get(url [,config])

axios.post(url [,data [,config]])

axios.put(url [,data [,config]])

axios.delete(url [,config])

axios.patch(url [,data [,config]])

axios.head(url [,config])

封装之前，需要下载axios依赖，这些准备工作做好后才能进行以下操作。

一，首先创建utils目录，在该目录下创建index.ts 文件，我这里用的是ts封装。

// 引入axios插件
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
// import { ElMessage } from 'element-plus'// 使用create 创建axios示例 （当然这里存在很多配置选项，具体需要具体配置）
const instance = axios.create()
// 我在这里直接指定了post请求的 请求类型 Content-Type，  可不设置看需要
instance.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'// 声明一个数组用于存储每个ajax请求的取消函数和ajax标识
const pending: any = []
const { CancelToken } = axios // axios 内置方法，此方法是为取消请求// 入参removeAll 为true时，清空数组。
const removePending = (ever: AxiosRequestConfig, removeAll?: boolean) => {for (let i = 0; i < pending.length; i += 1) {if (removeAll) {pending[i].f() // 执行取消操作pending.splice(i, 1) // 把这条记录从数组中移除} else if (pending[i].u === `${ever.url!.replace(/d=\d+/, '')}&${ever.method}`) {// 当当前请求在数组中存在时执行函数体pending[i].f() // 执行取消操作pending.splice(i, 1) // 把这条记录从数组中移除}}
}const removeOtherPending = (ever: string, removeAll?: boolean) => {for (let i = 0; i < pending.length; i += 1) {if (pending[i].u.indexOf(ever) !== -1) {// 当当前请求在数组中存在时执行函数体pending[i].f() // 执行取消操作pending.splice(i, 1) // 把这条记录从数组中移除}}
}// http request 拦截器
instance.interceptors.request.use((config: AxiosRequestConfig) => {// canMoreActive 参数用来判断是否需要被添加到pending队列中   该参数是设置在请求头中的，需要后台进行配置该参数if (!config.headers!.canMoreActive) {// 该接口是否可以多并发removePending(config) // 在一个ajax发送前执行一下取消操作// eslint-disable-next-line no-param-reassignconfig.cancelToken = new CancelToken((c) => {// 这里的ajax标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式pending.push({// 去除添加的日期导致的链接不一致u: `${config.url!.replace(/d=\d+/, '')}&${config.method}`,f: c,})})}return config},(error: AxiosError) => Promise.reject(error)
)// 必须在项目中重写该方法，因为如果调用多次use方法，是一个队列，函数都会执行
/* instance.interceptors.response.use((response: AxiosResponse) => {removePending(response.config) // 在一个ajax响应后再执行一下取消操作，把已经完成的请求从pending中移除if (response.data.code === 700) {ElMessage({type: 'error',message: response.data.msg,})}return response},(error: AxiosError) => Promise.reject(error)
) *//*** 封装get方法* @param url 请求url* @param params 参数* @param config config参数* @returns {Promise}*/
function fetch(url: string,params: any = {},config = {headers: {},}
): Promise<any> {return new Promise((resolve, reject) => {// 参数增加一个随机数解决浏览器缓存问题instance.get(`${url}?d=${new Date().getTime()}`, {params,headers: config.headers, // 设置get请求头，用来传递canMoreActive参数}).then((response) => {if (response) {resolve(response.data)}}).catch((err) => {reject(err)})})
}/*** 封装post请求* @param url 请求url* @param data 参数* @param config config参数* @returns {Promise}*/
function post(url: string,params: any = {},config = {},ContentType = ''
): Promise<any> {return new Promise((resolve, reject) => {if (ContentType) {instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'} else {instance.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'}instance.post(url, params, config).then((response) => {if (response) {resolve(response.data)}}).catch((err) => {reject(err)})})
}/*** 封装 DELETE 请求* @param {string} url 请求的URL* @param {object} data 请求参数* @param {object} config 额外的 Axios 请求配置* @returns {Promise<any>}*/
function del(url: string,data: any = {},config: AxiosRequestConfig = {}
): Promise<any> {return new Promise((resolve, reject) => {// 发起 DELETE 请求// 使用 delete 方法，注意要传递参数在 data 属性中instance.delete(url, {...config, data}).then((response: AxiosResponse) => {resolve(response.data) // 解析响应数据}).catch((error: AxiosError) => {reject(error) // 处理请求错误})})
}// 全部导出
export { instance, post, fetch, pending, del, removePending, removeOtherPending }

以上大致封装完毕，导出相关用法。

二，在你项目结构中所适用的位置创建 index.ts 文件，我是在apis 目录下创建的。

// 引入上文index.ts 文件  可以决定路径，也可@/...（@代表src下）。
import {instance, removePending, post, fetch, del, pending,} from '这里是你上个文件创建的位置'
import { ElMessage } from 'element-plus'
// ts中 axios 类型
import { AxiosResponse, AxiosError } from 'axios'
// 这里是在外部文件 处理的baseUrl 基准地址，你也可以在上文中就约定好，一般基准地址都是动态的，不手动修改的
import * as base from './base'
import router from '@/router'const instanceInit = () => {// 在这设置了基准地址 instance.defaults.baseURL = base.baseURL//instance.interceptors.response.use((response: AxiosResponse) => {removePending(response.config) // 在一个ajax响应后再执行一下取消操作，把已经完成的请求从pending中移除if (response.data.code === 401 || response.data.code === '401') {ElMessage({type: 'warning',message: response.data.msg || '登录信息已过期，请重新登录！',})router.replace({path: '/login'})return Promise.reject()}return response},(error: AxiosError) => {// 当前接口不需要提示if (!error.config?.params?.noWarning) {ElMessage({type: 'warning',message: '系统错误，请联系管理员!',})}return Promise.reject(error)})
}export { instanceInit, instance, removePending, post, del, fetch, pending }

三，在 main.ts 中引入：

// 引入 上文声明 instanceInit 方法
import { instanceInit } from './apis/index'instanceInit()

以上就是完整封装的axios，里面包含注释。如要登录后设置请求头token，可直接在拿到token后直接设置。

import { instance } from '@/apis/index'instance.defaults.headers.common.Authorization =  '你的token'

四，下面来看一下使用示例：

首先可以分业务类型，功能模块去区分各个不同文件。在此就创建一个 equipment.ts 文件。文件中定义不同路径请求的api。可直接在组件中引入使用。

// 引入封装好的  get  post 请求
import { fetch, post } from './index'export const updateSuspectNoItemYet = {r: (params: any) => fetch('/suspect/updateSuspectNoItemYet', params),
}export const listGoodsPage = {r: (params: any) => post('/goods/listGoodsPage', params, {headers: {// 这里设置 canMoreActive  说明该接口api 是可以并发的，多次请求。（也可在此配置 axios官网 所说的配置项 // eg： headers: { Authorization: 'Bearer 123' }）canMoreActive: 'canMoreActive',// Authorization: 'Bearer 123'},}),
}// 组件中 使用
import { listGoodsPage, updateSuspectNoItemYet  } from '@/apis/equipment'const getList = async () => {// params  入参  {id：'1',name: '测试'}const res = await listGoodsPage.r(params)
}