axios请求封装流程

一、总体流程

stateDiagram-v2
发起请求 --> pending
发起请求 --> fulfilled
发起请求 --> rejected

pending --> 取消后续相同请求

fulfilled --> 缓存接口数据（设定时间内不再请求数据，直接拿缓存数据）

rejected --> 重复提交请求，直到达到设定次数

重复提交请求，直到达到设定次数 --> 发起请求

二、封装流程

说明

接口请求参数，按需传入

cancelRequest: true // 是否开启取消重复请求功能
cache: true // 是否缓存请求结果
setExpireTime: 30000 // 缓存时间

变量说明

const pendingRequest = new Map() //存放pending状态的请求

流程

• 请求拦截流程

stateDiagram-v2
请求拦截 --> 是否开启取消重复请求功能
是否开启取消重复请求功能 --> 开启(cancelRequest=true)
是否开启取消重复请求功能 --> 关闭(cancelRequest=false)

开启(cancelRequest=true) --> pendingRequest中是否存在当前请求

pendingRequest中是否存在当前请求 --> 是
pendingRequest中是否存在当前请求 --> 否

是 --> 取消当前请求
否 --> 将当前请求加入pendingRequest中

请求拦截 --> 是否开启缓存请求结果功能
是否开启缓存请求结果功能 --> 开启(cache=true)
是否开启缓存请求结果功能 --> 关闭(cache=false)

开启(cache=true) --> 是否有缓存结果且是否过期
是否有缓存结果且是否过期 --> 有且没过期
有且没过期 --> 取消请求，cancel(data)返回数据（结果传递到catch中）

• 响应拦截流程

stateDiagram-v2
响应拦截 --> 是否开启取消重复请求功能
是否开启取消重复请求功能 --> 开启(cancelRequest=true)
是否开启取消重复请求功能 --> 关闭(cancelRequest=false)
开启(cancelRequest=true) --> 请求失败情况下
开启(cancelRequest=true) --> 请求成功情况下

请求失败情况下 --> (失败情况下)pendingRequest中是否存在当前请求
(失败情况下)pendingRequest中是否存在当前请求 --> (失败情况下)是
(失败情况下)pendingRequest中是否存在当前请求 --> (失败情况下)否

请求成功情况下 --> (成功情况下)pendingRequest中是否存在当前请求
(成功情况下)pendingRequest中是否存在当前请求 --> (成功情况下)是
(成功情况下)pendingRequest中是否存在当前请求 --> (成功情况下)否

(成功情况下)是 --> (成功情况下)删除pendingRequest中对应请求
(成功情况下)删除pendingRequest中对应请求 --> 将成功结果存入缓存
将成功结果存入缓存 --> 在设定时间内，后续相同请求从缓存中获取

(失败情况下)是 --> (失败情况下)是删除pendingRequest中对应请求
(失败情况下)是删除pendingRequest中对应请求 --> 重新发起请求

响应拦截 --> 是否开启缓存请求结果功能
是否开启缓存请求结果功能 --> 开启(cache=true)
是否开启缓存请求结果功能 --> 关闭(cache=false)

开启(cache=true) --> 将请求结果存入缓存

三、使用

middleViewData: data => request.get('/jscApi/middleViewData', { data }), // 正常请求 
cancelReq: data => request.get('http://localhost:3003/jscApi/middleViewData', { data, cancelRequest: true }), // 测试取消请求 
reqAgainSend: data => request.get('/equ/equTypeList11', { data, retry: 3, retryDelay: 1000 }), // 测试请求重发，除了原请求外还会重发3次 
cacheEquList: data => request.get('/equ/equList', { data, cache: true, setExpireTime: 30000 }), // 测试缓存请求带参数：setExpireTime 为缓存有效时间ms 
cacheEquListParams: data => request.get('/equ/equList', { data, cache: true }) // 测试缓存请求参数值不一样

四、原文链接

axios 请求终极封装【取消重复请求，请求失败自动重试，请求接口数据缓存】 - 掘金 (juejin.cn)