假設有這樣一個場景,在使用者快速點選重新整理按鈕後,短時間內會有多個網路請求發出,為了僅僅保留最新的一次請求,我們需要遮蔽之前發出請求的回撥,不要因為非同步回撥順序的不同導致頁面重新整理多次。
這裡的做法是每次請求api的時候就儲存當前的上下文環境(用唯一標識也是可以的),接到返回的時候判斷這個返回是否是應該保留的,進而實現這個需求。
let context;
refresh() {
context = {};
new Promise((resolve, reject) => {
let currentContext = context;
post('xxx', {name: 'kale'})
.then((json) => {
if (context === currentContext) {
resolve(json)
} else {
reject("CANCELED");
}
})
.catch((json) => {
if (context === currentContext) {
reject(json);
} else {
reject("CANCELED");
}
})
}
).then((json) => {
// success
}).catch((reason) => {
if (reason !== "CANCELED") {
// error
}
});
}
複製程式碼
- 這個場景是短時間內多次請求保留最後一次
- 如果你想要終止回撥,那麼可以直接將context置空
- 如果你想要當前僅存在唯一的非同步回撥,那麼就可以加個isLoading的標誌位