前端接口并发、缓存Promise、Axios合并请求

前端接口并发、缓存Promise、Axios合并请求

问题描述：最近遇到一个问题，目前自己在做的公司项目中同一个页面下，多个模块会同时用到一个接口。导致在进入页面的时候会同时发送多个相同的请求。作为一个有追求的前端当然不能忍了。
然后我就开始想解决办法，大致方向就是通过接口缓存，在请求的时候检查一下当前进行中的请求有哪些，如果有相同的就返回已存在的，没有的话就加入缓存。
有个问题就是promise对象没有办法直接同步的拿到当前的状态，本来打算隔段时间就把已经完成的promise清理一下，所以改成了定时清空缓存的所有promise对象。

// 用来缓存Promise对象的数组 { key: url+param, value: promise }
let promiseList = [ ]

// 每隔5分钟清空一下promise列表，防止内存溢出
setInterval(() => {
 promiseList = []
}, 300000)

// 检查
function checkPromise (url,param) {
 let key = url+JSON.stringify(param)
 // 看看有没有相同 Promise
 let res = promiseList.filter(item => item.key === key)
 // 如果有相同的进行中的promise，直接返回
 if (res.length>0) {
   console.log('存在并发请求')
   return res[0].value
 // 如果没有相同的则需要存入当前的Promise并返回
 } else {
   return false
 }
}

// 自己封装的get请求
// 使用的时候多传一个参数merge 表示是否使用并发合并的功能
export default function zGet (url, param, merge=false) {
 // 检查是否命中缓存中的promise如果有返回命中，不再发出请求
 let cachePromise = checkPromise(url,param)
 if (merge && cachePromise) {
   return cachePromise
 }

 let promise = instance.get(url, { params: param })
 promiseList.push({
   key: url+JSON.stringify(param),
   value: promise,
 })
 return promise

}