JS如何為promise增加abort功能

更新時間：2021年04月28日 14:59:00 作者：淺笑·

這篇文章主要介紹了JS為promise增加abort功能，想了解JS異步的同學，可以參考下

概述

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

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

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

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

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: abort

AbortController

（這是一個實驗中的功能,歸屬于DOM規(guī)范，此功能某些瀏覽器尚在開發(fā)中）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.
//中斷一個promise
class 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: Aborted

Axios插件自帶取消功能

//1.使用source的token
const 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. 通過傳出的function
const 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 request
cancel();

//主要：使用相同token的請求可以一并取消

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

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

您可能感興趣的文章: