如何取消未完成的 Promise 请求

在前端开发中，我们经常会使用 Promise 来处理异步请求。但是，一旦请求发出后，我们有时候需要取消它，比如用户在输入框中输入了新的内容，而之前的请求已经失效了。本文将介绍如何取消未完成的 Promise 请求。

Promise 的基本使用

首先，我们来回顾一下 Promise 的基本使用方法。

// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('success');
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

上面的代码创建了一个 Promise 对象，其中包含一个异步操作。当异步操作完成后，调用 resolve 方法将结果传递给 then 方法，调用 reject 方法将错误传递给 catch 方法。

取消 Promise 请求的方法

Promise 本身并没有提供取消请求的方法，但是我们可以通过一些技巧来实现。

方法一：使用 AbortController

AbortController 是一个新的 Web API，它可以用来取消网络请求、定时器等操作。我们可以通过 AbortController 来取消 Promise 请求。

// www.javascriptcn.com code example
const controller = new AbortController();
const { signal } = controller;

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('success');
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

// 取消请求
controller.abort();

上面的代码中，我们创建了一个 AbortController 对象，并通过它的 signal 属性获取一个 AbortSignal 对象。然后将 AbortSignal 对象传递给 Promise 的异步操作中，当调用 abort 方法时，AbortSignal 对象会发出一个中止信号，从而中止 Promise 请求。

方法二：使用 Promise.race

Promise.race 方法可以将多个 Promise 对象合并成一个 Promise 对象，并返回最先完成的 Promise 对象的结果。

我们可以利用这个特性，将 Promise 对象和一个包含取消标记的 Promise 对象一起传递给 Promise.race 方法，当取消标记的 Promise 对象完成时，Promise.race 方法会返回它的结果，从而中止 Promise 请求。

// www.javascriptcn.com code example
const cancelPromise = new Promise((resolve, reject) => {
  // 取消请求
  setTimeout(() => {
    reject(new Error('Promise cancelled'));
  }, 500);
});

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('success');
  }, 1000);
});

Promise.race([promise, cancelPromise]).then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

上面的代码中，我们创建了一个包含取消标记的 Promise 对象 cancelPromise，当它完成时，会返回一个包含错误信息的 Promise 对象。然后将 cancelPromise 和实际的 Promise 对象一起传递给 Promise.race 方法，当 cancelPromise 完成时，Promise.race 方法会返回它的结果，从而中止 Promise 请求。

小结

本文介绍了如何取消未完成的 Promise 请求，包括使用 AbortController 和 Promise.race 两种方法。在实际开发中，我们可以根据具体场景选择合适的方法来取消 Promise 请求，从而提高应用程序的性能和用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d53cb8a941bf71349ae865