您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“如何取消正在運行的Promise”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
項目當中有很多業(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.
我們知道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可取消。
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;
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 終止了。。。') }
“如何取消正在運行的Promise”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。