前端处理异步请求顺序

之前有一道面试题 一个模糊搜索组件如何设计 首先防抖截流什么的肯定是能想到了 主要是一个问题 promise有一个缺点 就是如果前一个请求返回比较慢 会导致覆盖最新的请求结果 因此这个问题是最核心的考察点
我们可以参考promise.race原理的思想 返回慢的一直让它pending就好了 因此 我们可以将上一个请求一直pending就好了

function request (t) {
    return new Promise(resolve => {
        setTimeout(function () {
            resolve(t)
        }, t)
    })
}

var map = {}

function getLatest (key, fn, time) {
    if (!map[key]) {
        map[key] = 1
    }
 
    return new Promise((_res, _rej) => {
      resolve = (val) => {
           _res(val)
      } 
      reject = (val) => {
        _rej(val)
      }
      var t = Date.now()
      map[key] = t
      fn(time).then(res => {
          console.log(t, map[key], '/t < map[key]');
          if (t < map[key]) return
          resolve(res)
      }).catch(error => {
          if (t < map[key]) return
          reject(error)
        })
     })
        
   
}
getLatest('a', request, 4000).then(res => {
    console.log(res, '/////')
})

setTimeout(() => {
  getLatest('a', request, 1000).then(res => {
        console.log(res, '//////')
    })
    
}, 1000)

我们只需要将请求包一层promise就可以 如果是上一次的请求 就直接return 这样就取消之前的请求啦🤩
再总结一下promise.race

var race = function (array) {
    return new Promise((resolve, reject) => {
      array.forEach((item) => {
          item.then((res) => {
            resolve(res)
          }).catch((err) => {
              reject(err)
          })
        })
    })
}