概述

Promise只有三種狀態：pending、resolve、reject,一個異步的承諾一旦發出，經歷等待（pending）后，最終只能為成功或者失敗，中途無法取消（abort）。

為promise提供abort功能的思路有兩種：

手動實現abort，觸發取消后，異步回來的數據直接丟棄（手動實現，比較穩妥） 使用原生方法AbortController中斷請求（實驗中的方法，有兼容性，ie不支持）

手動實現abort方法有兩種模式：都是依賴promise的接口間接實現

promise race方法

let PromiseWithAbort = function(promise){ let _abort = null; let Pabort = new Promise((res,rej)=>{ _abort = function(reason =’abort !’){console.warn(reason);rej(reason); } }); let race = Promise.race([promise,Pabort]); race.abort = _abort; console.log(promise,Pabort); return race; }let p1= new Promise(res=>{ setTimeout(()=>{ res(’p1 success’); },2000)})let testP = PromiseWithAbort(p1);testP.then(res=>{ console.log(’success:’,res);},error=>{ console.log(’error:’,error);})testP.abort();// 結果： reject: abort!重新包裝promise

class PromiseWithAbort { constructor(fn){ let _abort = null; let _p = new Promise((res,rej)=>{fn.call(null,res,rej);_abort = function(error=’abort’){ rej(error); } }) _p.abort = _abort; return _p; } } let testP = new PromiseWithAbort((res,rej)=>{ setTimeout(() => { res(1); },1000); }); testP.then(r=>{ console.log(’res:’,r); },r=>{ console.log(’rej:’,r); }); testP.abort();//結果： rej: abortAbortController 

（這是一個實驗中的功能,歸屬于DOM規范，此功能某些瀏覽器尚在開發中）AbortController接口代表一個控制器對象，允許你在需要時中止一個或多個DOM請求。

// 中斷fetch請求 let controller = new AbortController(); let signal = controller.signal; fetch(’https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally’,{signal}).then(r=>{ console.log(r); }); controller.abort();//結果： Uncaught (in promise) DOMException: The user aborted a request.//中斷一個promiseclass PromiseWithAbortController { constructor(fn,{signal}){ if(signal && signal.aborted){ return Promise.reject(new DOMException(’Aborted’,’AbortError’)); } let _p = new Promise((resolve,reject)=>{ fn.call(null,resolve,reject); if(signal){signal.addEventListener(’abort’,()=>{ reject(new DOMException(’Aborted’,’AbortError’));}) } }); return _p; }}let controller = new AbortController(); let signal = controller.signal;let testP2 = new PromiseWithAbortController((r,j)=>{ setTimeout(() => { r(’success’); }, 1000);},{signal});testP2.then(r=>{ console.log(’res:’,r); },r=>{ console.log(’rej:’,r); }); controller.abort(); // 結果： rej: DOMException: AbortedAxios插件自帶取消功能

//1.使用source的tokenconst CancelToken = axios.CancelToken;const source = CancelToken.source();axios.get(’/user/12345’, { cancelToken: source.token}).catch(function (thrown) { if (axios.isCancel(thrown)) { console.log(’Request canceled’, thrown.message); } else { // handle error }});axios.post(’/user/12345’, { name: ’new name’}, { cancelToken: source.token})// cancel the request (the message parameter is optional)source.cancel(’Operation canceled by the user.’);//2. 通過傳出的functionconst CancelToken = axios.CancelToken;let cancel;axios.get(’/user/12345’, { cancelToken: new CancelToken(function executor(c) { // An executor function receives a cancel function as a parameter cancel = c; })});// cancel the requestcancel();//主要：使用相同token的請求可以一并取消

在現在項目中使用最頻繁的是axios，所以取消請求不用擔心。dom規范的AbortController，由于兼容性，不推薦使用。如果需要自己動手實現的話，還是文章前兩種方法較穩妥（promise race方法和重新包裝promise方法）。

以上就是JS為promise增加abort功能的詳細內容，更多關于JS的資料請關注好吧啦網其它相關文章！