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

colorPaper.jpg

问题描述：最近遇到一个问题，目前自己在做的公司项目中同一个页面下，多个模块会同时用到一个接口。导致在进入页面的时候会同时发送多个相同的请求。作为一个有追求的前端当然不能忍了。

然后我就开始想解决办法，大致方向就是通过接口缓存，在请求的时候检查一下当前进行中的请求有哪些，如果有相同的就返回已存在的，没有的话就加入缓存。

项目中的请求库用的Axios.js 代码如下

export default function zGet (url, param) {
    return  Axios.get(url, { params: param })
}

上面函数返回的就是Promise对象，我们要做的就是把这个对象缓存起来，放到一个数组中，然后在发请求时先来这里检查下有没有缓存，没有就加进去。这里主要是利用promise的一个特性，无论promise处于什么状态 pending、resolved、rejected。后面都可以用then函数得到相同的结果。每个promise对象的标识就是 path+参数

// 用来缓存Promise对象的数组
// 里面的对象格式如下
// { key: url+param, value: promise }
let promiseList = [ ]
// 检查
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
  }
}

目前有个问题就是promise对象没有办法直接同步的拿到当前的状态，本来打算隔段时间就把已经完成的promise清理一下，所以改成了定时清空缓存的所有promise对象。

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

完整的代码如下：

// 用来缓存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
}

这样就完美解决了我的问题，希望也能对大家有所帮助。