JavaScript取消Promise操作的常見實現方式

更新時間：2025年10月22日 08:36:09 作者：東東233

在 JavaScript 中,Promise 本身沒有內置的取消機制,但我們可以通過一些模式來實現類似取消的功能,以下是幾種常見的實現方式,需要的朋友可以參考下

前言

在 JavaScript 中，Promise 本身沒有內置的取消機制，但我們可以通過一些模式來實現類似取消的功能。以下是幾種常見的實現方式

方法一：使用 Promise.race() 模擬取消

Promise.race 靜態(tài)方法接受一個 promise 可迭代對象作為輸入，并返回一個 Promise。這個返回的 promise 會隨著第一個 promise 的敲定而敲定。那么我們可以傳給它兩個Promise，一個正常執(zhí)行，一個我們將Promise的reject方法緩存下來，只需要在我們需要取消的時候調用即可

// 封裝取消函數
const cancelPromise = (promise) => {
  let cancel
  // 定義一個取消的Promise
  const rejectPromise = new Promise((_, reject) => {
    cancel = () => {
      reject({ name: 'cancel' })
    }
  })
  const resultPromise = Promise.race([promise, rejectPromise])
  return {
    cancel,
    promise: resultPromise
  }
}
const { cancel, promise } = cancelPromise(
  new Promise((resolve) => {
    // 3s之后完成
    setTimeout(() => {
      resolve({ data: [] })
    }, 3000)
  })
)
promise
  .then((res) => {
    console.log('Promise Resolve', res)
  })
  .catch((error) => {
    // 'cancel'
    console.log(error.name)
  })
setTimeout(() => {
  cancel()
}, 2000)

方法二：使用 AbortController（推薦）

AbortController 是一個構造函數，其signal我們可以傳給fetch Api，然后我們只需要調用abort方法就可以取消該請求axios也支持該方法取消。

const controller = new AbortController()
fetch('http://api.com/query', { signal: controller.signal })
  .then((res) => {
    console.log(res)
  })
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('Promise 已取消')
    }
  })
// 超時取消
setTimeout(() => {
  controller.abort()
}, 2000)

被取消的請求會被瀏覽器標記為canceled

方法三：使用 Bluebird 庫

Bluebird 是一個完善的Promise庫，其完全遵循Promises/A+標準，所以我們可以像日常使用Promise一樣使用他，而且它有許多超越原生Promise的功能、比如支持 Promise 取消、進度追蹤、超時控制、更強大的錯誤處理機制（如 OperationalError）等。我們使用時候只需要安裝后直接引入即可

yarn add bluebird

import Promise from 'bluebird'
...
// 打開取消功能
Promise.config({ cancellation: true })
const testPromise  = new Promise((resolve, reject, onCancel) => {
  setTimeout(() => {
    resolve('成功')
  }, 3000)
  onCancel(function () {
    console.log('promise 已被取消')
  })
})
  .then((res) => {
    console.log(res)
  }).finally(() => {
    // 判斷Promise是否取消
    if(testPromise.isCancelled()) {
      console.log('promise 已被取消')
    }
  })
setTimeout(() => {
  // 取消Promise
  testPromise.cancel()
}, 1000)

可以看到正常使用和原生Promise并無區(qū)別，但是新增了onCancel、cancel、config等Api，簡單介紹下

cancel：用于取消當前Promise
onCancel：Promise取消后會調用傳入該方法的回調
isCancelled：判斷Promise是否取消
config：配置項，因為取消Promise在當前版本中是默認關閉、傳入cancellation: true打開取消功能

總結與對比

在前端開發(fā)中，取消 Promise 操作是處理異步流程控制的重要能力。以下是各方案的對比：

方案對比

方案	優(yōu)點	缺點	適用場景
Promise.race()	純 JavaScript 實現，無需額外庫	只是"模擬"取消，實際異步操作仍在執(zhí)行	簡單的取消需求，兼容性要求高
AbortController	原生支持，與 fetch API 深度集成	較新的 API，需要 polyfill	網絡請求取消，現代瀏覽器項目
Bluebird	功能豐富，API 完善	需要引入第三方庫，增加包體積	需要高級 Promise 功能的復雜應用