js如何取消promise

在JavaScript中取消Promise的方法有：使用AbortController、使用外部标志位、将Promise包装在可取消的对象中。 其中，使用AbortController 是一种较为现代和标准的方式，可以在多种场景下灵活运用。

使用AbortController：AbortController 是一个内置的浏览器API，最初是为Fetch API设计的，但也可以用于其他异步操作。通过创建一个AbortController实例，我们可以传递它的signal属性给Promise，随后我们可以调用controller.abort()来取消Promise。这种方法不仅简单而且非常高效。

一、使用AbortController取消Promise

AbortController 是一种强大且灵活的工具，特别适用于需要在中途取消异步操作的场景。我们可以通过以下步骤实现Promise的取消：

1. 创建AbortController实例

首先，我们需要创建一个AbortController实例，并从中获取signal对象：

const controller = new AbortController();

const signal = controller.signal;

2. 将signal传递给Promise

在创建Promise时，我们可以将signal传递给它。例如，我们可以将signal传递给Fetch API来取消网络请求：

const fetchData = () => {

  return fetch('https://api.example.com/data', { signal })
    .then(response => response.json())
    .catch(error => {
      if (error.name === 'AbortError') {
        console.log('Request was aborted');
      } else {
        console.error('Fetch error:', error);
      }
    });
};

3. 取消Promise

当我们需要取消Promise时，只需调用controller.abort()方法：

controller.abort();

4. 完整示例

下面是一个完整的示例代码，展示如何使用AbortController取消Promise：

const controller = new AbortController();

const signal = controller.signal;
const fetchData = () => {
  return fetch('https://api.example.com/data', { signal })
    .then(response => response.json())
    .catch(error => {
      if (error.name === 'AbortError') {
        console.log('Request was aborted');
      } else {
        console.error('Fetch error:', error);
      }
    });
};
// 开始请求
fetchData();
// 取消请求
setTimeout(() => {
  controller.abort();
}, 5000); // 在5秒后取消请求

二、使用外部标志位取消Promise

另一种方法是使用外部标志位来手动检查Promise是否应该被取消。这种方法虽然较为简单，但需要手动管理标志位，适用于一些特殊场景。

1. 设置取消标志位

首先，定义一个外部标志位：

let isCancelled = false;

2. 在Promise中检查标志位

在Promise的执行过程中，定期检查标志位是否为true，如果是，则中断操作：

const fetchData = () => {

  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      if (isCancelled) {
        reject(new Error('Promise was cancelled'));
      } else {
        resolve('Data fetched successfully');
      }
    }, 3000);
  });
};

3. 取消Promise

当需要取消Promise时，只需将标志位设置为true：

isCancelled = true;

4. 完整示例

下面是一个完整的示例代码，展示如何使用外部标志位取消Promise：

let isCancelled = false;

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isCancelled) {
        reject(new Error('Promise was cancelled'));
      } else {
        resolve('Data fetched successfully');
      }
    }, 3000);
  });
};
// 开始请求
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));
// 取消请求
setTimeout(() => {
  isCancelled = true;
}, 1500); // 在1.5秒后取消请求

三、将Promise包装在可取消的对象中

我们还可以将Promise包装在一个可取消的对象中，这样可以更灵活地管理Promise的取消操作。这种方法适用于复杂的异步操作，尤其是在需要管理多个Promise的场景下。

1. 创建可取消的Promise对象

首先，定义一个可取消的Promise对象：

class CancellablePromise {

  constructor(executor) {
    this._isCancelled = false;
    this._promise = new Promise((resolve, reject) => {
      executor(
        value => {
          if (this._isCancelled) {
            reject(new Error('Promise was cancelled'));
          } else {
            resolve(value);
          }
        },
        reason => {
          if (this._isCancelled) {
            reject(new Error('Promise was cancelled'));
          } else {
            reject(reason);
          }
        }
      );
    });
  }
  cancel() {
    this._isCancelled = true;
  }
  then(onFulfilled, onRejected) {
    return this._promise.then(onFulfilled, onRejected);
  }
  catch(onRejected) {
    return this._promise.catch(onRejected);
  }
}

2. 使用可取消的Promise

使用可取消的Promise时，只需实例化CancellablePromise类，并在需要取消时调用cancel方法：

const fetchData = () => {

  return new CancellablePromise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 3000);
  });
};
// 开始请求
const cancellablePromise = fetchData();
cancellablePromise
  .then(data => console.log(data))
  .catch(error => console.error(error));
// 取消请求
setTimeout(() => {
  cancellablePromise.cancel();
}, 1500); // 在1.5秒后取消请求

四、综合比较及使用建议

1. 使用场景

• AbortController：适用于现代浏览器环境，特别是与Fetch API结合使用时。推荐在需要中途取消网络请求的场景下使用。
• 外部标志位：适用于简单的异步操作，尤其是当你已经有一个状态管理机制时。适合快速实现取消功能。
• 可取消的对象：适用于复杂的异步操作管理，尤其是在需要管理多个Promise的场景下。适合需要灵活管理Promise生命周期的应用。

2. 性能和可维护性

• AbortController：性能较好，且代码简洁明了，是未来趋势。推荐使用。
• 外部标志位：实现简单，但需要手动管理标志位，可能导致代码冗长且不易维护。
• 可取消的对象：灵活性高，但实现较为复杂，适用于特定场景。

综上所述，推荐使用AbortController来取消Promise，特别是在现代浏览器环境和需要中途取消网络请求的场景下。

相关问答FAQs：

Q: 如何取消一个 JavaScript Promise？

A: 取消一个 JavaScript Promise 可以通过以下方式实现：

Q: 如何在 JavaScript 中取消一个 Promise 的执行？

A: 取消一个 JavaScript Promise 的执行有几种方法可供选择：

Q: 我怎样才能停止一个正在执行的 JavaScript Promise？

A: 如果你想停止一个正在执行的 JavaScript Promise，有几种方法可以尝试：