簡單粗暴的去重promise的回撥

天之界線2010發表於2018-08-29
Promise

假設有這樣一個場景，在使用者快速點選重新整理按鈕後，短時間內會有多個網路請求發出，為了僅僅保留最新的一次請求，我們需要遮蔽之前發出請求的回撥，不要因為非同步回撥順序的不同導致頁面重新整理多次。

這裡的做法是每次請求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的標誌位

相關文章