之前有一道面試題 一個模糊搜索組件如何設(shè)計 首先防抖截流什么的肯定是能想到了 主要是一個問題 promise有一個缺點 就是如果前一個請求返回比較慢 會導致覆蓋最新的請求結(jié)果 因此這個問題是最核心的考察點
我們可以參考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 這樣就取消之前的請求啦??
再總結(jié)一下promise.race
var race = function (array) {
return new Promise((resolve, reject) => {
array.forEach((item) => {
item.then((res) => {
resolve(res)
}).catch((err) => {
reject(err)
})
})
})
}
