取消正在運行的Promise技巧詳解
更新時間：2022年06月08日 15:29:02 作者：杰出D
這篇文章主要為大家介紹了取消正在運行的Promise技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
前言
最近項目當中小伙伴遇到一個很奇怪的bug，進入一個頁面后，快速切換到其它頁面，會跳轉(zhuǎn)到403頁面。經(jīng)過一段時間和小伙伴的排查，發(fā)現(xiàn)那個頁面有個接口請求響應時間比較長，請求后還有一些業(yè)務處理。
等我們切換到其它頁面，這個請求完成后還會處理剩下的業(yè)務，導致出錯。
代碼案例
項目當中有很多業(yè)務，我們用一些簡單代碼復現(xiàn)下這個問題。
import React, { useEffect } from 'react';
import { history } from 'umi';
const Test = props => {
useEffect(() => {
new Promise((resolve, reject) => {
// 模擬接口請求時間
setTimeout(() => {
resolve()
}, 4000);
}).then(res => {
return new Promise((resolve1) => {
// 模擬接口請求時間
setTimeout(() => {
resolve1()
}, 1000);
})
}).then(() => {
// Promise 執(zhí)行完后頁面跳轉(zhuǎn)
history.push('/test1')
})
}, []);
const go = () => {
history.push('/user/login')
}
return (
<div>
<button onClick={go}>go to</button>
Test
</div>
);
}
export default Test;
我們進入Test組件后，馬上點擊go to按鈕，幾秒之后頁面還會跳轉(zhuǎn)到test1頁面。
經(jīng)分析，我們應該在離開的時候要取消請求和取消Promise讓后續(xù)的業(yè)務代碼不在執(zhí)行，取消請求比較簡單，一般的庫都支持，我們來說下怎么取消Promise.
CancelablePromise (取消Promise)
我們知道Promise是沒有提供取消或者終止的操作。但我們在開發(fā)過程中會遇到。我們可以參考和借助AbortController來實現(xiàn)。
class CancelablePromise<T> {
/**
* 構(gòu)造器
* @param executor Promise中的 executor
* @param abortSignal AbortController中的signal對象
* @returns
*/
constructor(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void, abortSignal: AbortSignal) {
// 記錄reject和resolve方法
let _reject: any = null;
let _resolve: any = null;
let _isExecResolve = false;
// 創(chuàng)建和執(zhí)行Promise
const cancelablePromise = new Promise<T>((resolve, reject) => {
_reject = reject;
_resolve = (value: T) => {
_isExecResolve = true;
resolve(value);
};
return executor(_resolve, reject);
});
// 監(jiān)聽Signal的abourt事件
abortSignal.addEventListener('abort', () => {
if (_isExecResolve) {
return;
}
// 拋出錯誤
const error = new DOMException('user cancel promise', CancelablePromise.CancelExceptionName );
_reject( error );
} );
return cancelablePromise;
}
// 取消后拋出的異常名稱
static CancelExceptionName = 'CancelablePromise AbortError';
}
export default CancelablePromise;
使用
下面我們該造下之前的代碼，用我們封裝的CancelablePromise,可以讓Promise可取消。
多個Promise鏈式調(diào)用
import React, { useEffect } from 'react';
import { history } from 'umi';
import CancelablePromise from '../utils/CancelablePromise';
const Test = props => {
useEffect(() => {
let abortController = new AbortController();
new CancelablePromise((resolve, reject) => {
// 模擬接口請求時間
setTimeout(() => {
resolve()
}, 4000);
}, abortController.signal).then(res => {
return new CancelablePromise((resolve1) => {
// 模擬接口請求時間
setTimeout(() => {
resolve1()
}, 1000);
}, abortController.signal)
}).then(() => {
// Promise 執(zhí)行完后頁面跳轉(zhuǎn)
history.push('/test1')
})
return () => {
// 取消請求
abortController.abort();
}
}, []);
const go = () => {
history.push('/user/login')
}
return (
<div>
<button onClick={go}>go to</button>
Test
</div>
);
}
export default Test;
在async和await中使用
import React, { useEffect } from 'react';
import { history } from 'umi';
import CancelablePromise from '../utils/CancelablePromise';
const Test = props => {
useEffect(() => {
let abortController = new AbortController();
const exec = async function () {
try {
await new CancelablePromise((resolve) => {
setTimeout(() => {resolve();}, 5000);
}, abortController.signal, 'one')
await new CancelablePromise((resolve1) => {
setTimeout(() => {resolve1();}, 5000);
}, abortController.signal, 'del')
history.push('/test')
} catch (error) {
// 取消之后會拋出異常
if (CancelablePromise.CancelExceptionName === error.name) {
console.log('promise 終止了。。。')
}
}
}
exec();
return () => {
// 取消請求
abortController.abort();
}
}, []);
}
Promise取消之后會拋出異常，如果需要在拋出異常之后做處理，可以通關(guān)對應的異常名稱做判斷。
if (CancelablePromise.CancelExceptionName === error.name) {
console.log('promise 終止了。。。')
}
結(jié)束語
Promise的取消在業(yè)務當中用到的地方比較多，更多關(guān)于Promise運行取消的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react 路由跳轉(zhuǎn)的7種方式實現(xiàn)
本文介紹了React中六種常見的路由跳轉(zhuǎn)方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-03-03
通過React-Native實現(xiàn)自定義橫向滑動進度條的 ScrollView組件
開發(fā)一個首頁擺放菜單入口的ScrollView可滑動組件,允許自定義橫向滑動進度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序為縱向由上至下依次排列,對React Native橫向滑動進度條相關(guān)知識感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了React生命周期原理與用法,結(jié)合實例形式總結(jié)分析了react生命周期原理、用法及相關(guān)注意事項,需要的朋友可以參考下2020-04-04
IntersectionObserver實現(xiàn)加載更多組件demo
這篇文章主要為大家介紹了IntersectionObserver實現(xiàn)加載更多組件demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
在一些react項目開發(fā)中,常常會出現(xiàn)一些組合的情況出現(xiàn),這篇文章主要為大家介紹了復合組件的具體實現(xiàn),感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
在開發(fā)項目的時候,從服務端獲取到數(shù)據(jù)列表后,展示給用戶看,需要實現(xiàn)數(shù)據(jù)自動滾動效果,怎么實現(xiàn)呢,下面小編給大家分享react實現(xiàn)列表滾動組件功能實現(xiàn)代碼,感興趣的朋友一起看看吧2023-09-09
react中useState使用:如何實現(xiàn)在當前表格直接更改數(shù)據(jù)
這篇文章主要介紹了react中useState的使用:如何實現(xiàn)在當前表格直接更改數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React報錯信息之Expected?an?assignment?or?function?call?and?
這篇文章主要介紹了React報錯之Expected?an?assignment?or?function?call?and?instead?saw?an?expression,下面有兩個示例來展示錯誤是如何產(chǎn)生的，需要的朋友可以參考下2022-08-08
React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案
這篇文章主要為大家介紹了React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了React組件refs的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02