如何中断Promise？

最新推荐文章于 2024-05-17 13:52:13 发布

He_wc

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量1.7k

点赞数 20

分类专栏： ES6 文章标签： javascript 前端

本文链接：https://blog.csdn.net/he_9a9/article/details/135246251

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在 JavaScript 中，Promise 对象表示一个异步操作的最终完成或失败及其结果值

Promise 有个缺点就是一旦创建就无法取消，所以本质上 Promise 是无法被终止的，但是在开发中往往要满足需求

在某些情况下，你可能需要中断（取消）一个 Promise，以下是几个常见的原因：

不再需要 Promise 结果：在某些场景下，当你发起一个异步操作，并且在操作完成之前就确定不再需要该操作的结果时，中断 Promise 可以避免浪费资源和时间。
超时处理：有时候，你可能希望在一个特定的时间范围内获得 Promise 的结果，如果操作超过了指定的时间，你可能会中断 Promise，以避免长时间等待或阻塞其他操作。
用户主动取消：当用户执行某个操作，但在操作完成之前改变了主意，或者希望终止正在进行的异步操作时，你可以中断 Promise 来响应用户的取消请求。
错误处理：在某些情况下，当某个条件不满足时，你可能会中断 Promise，并返回一个特定的错误信息。这样可以避免继续执行 Promise 链并在后续操作中处理无效的结果。

总而言之，中断 Promise 可以提高代码的灵活性和可控性，避免不必要的资源消耗，并及时响应用户的操作。然而，需要注意的是，并非所有的 Promise 实现都支持中断操作，你可能需要使用特定的工具或技术来实现中断功能。

使用 AbortController 中断

const controller = new AbortController();
const signal = controller.signal;

const promise = new Promise((resolve, reject) => {
  const timeoutId = setTimeout(() => {
    resolve("Promise resolved");
  }, 5000);

  // 监听 signal 是否被中止
  signal.addEventListener("abort", () => {
    clearTimeout(timeoutId);
    reject(new Error("Promise aborted"));
  });
});

// 中止 Promise
controller.abort();

在这个示例中，我们首先创建了一个新的 AbortController 实例和对应的 signal。然后，在 Promise 内部，我们设置了一个计时器来模拟异步操作，并在5秒后解决 Promise。同时，我们监听 signal 上的 abort 事件，以便在 Promise 被中止时清除计时器并拒绝 Promise。最后，我们使用 controller.abort() 方法来中止 Promise。

需要注意的是，AbortController API 是一个比较新的 API，目前还不被所有浏览器完全支持。如果你需要在旧版浏览器中使用 AbortController，可以考虑使用 polyfill 或者其他类似的库来实现。

使用闭包和标记变量

function createCancelablePromise() {
  let isCanceled = false;

  const promise = new Promise((resolve, reject) => {
    // 模拟一个异步操作
    const timeoutId = setTimeout(() => {
      if (!isCanceled) {
        resolve("Promise resolved");
      }
    }, 5000);

    // 中断函数
    promise.cancel = function() {
      isCanceled = true;
      clearTimeout(timeoutId);
      reject(new Error("Promise canceled"));
    };
  });

  return promise;
}

const myPromise = createCancelablePromise();

// 在某个条件下中断 Promise
myPromise.cancel();

在这个示例中，我们创建了一个名为 createCancelablePromise 的函数，它返回一个 Promise 对象。在 Promise 内部，我们使用 isCanceled 变量来标记 Promise 是否被中断，同时暴露了一个 cancel 方法来中断 Promise。当调用 cancel 方法时，我们将标记变量设置为 true，清除计时器，并拒绝 Promise。

需要注意的是，这种方法是一种折中的方案，并不是官方标准的 Promise 中断机制。因此，在实际应用中，你可能需要根据具体的需求和场景选择适合的中断 Promise 的方法。

JavaScript 第三方库

import axios from "axios";

const source = axios.CancelToken.source();

axios.get("/api/data", { cancelToken: source.token })
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log("请求被取消:", error.message);
    } else {
      console.log("请求出错:", error.message);
    }
  });

// 在需要取消请求的地方调用
source.cancel("取消请求");

axios 是一个流行的基于 Promise 的 HTTP 客户端，它支持取消请求的功能。通过使用 axios 提供的 CancelToken 和 cancel 方法，你可以在发起请求后随时取消请求

中断 Promise 的操作可以在某些情况下提供一些优势，但也可能带来一些劣势。让我们来看一下中断 Promise 的利弊：

利：

节省资源和时间：在某些场景下，中断 Promise 可以避免不必要的网络请求或计算过程，从而节省资源和时间。例如，在用户取消请求或者在某个条件不满足时中断 Promise，可以避免无效的请求和计算。
提升用户体验：如果用户可以中断长时间运行的 Promise 操作，他们可以更快地获得响应，并且有更多的控制权。这可以提升用户体验，并让用户感到更满意。
提高代码可读性和可维护性：通过在代码中显式地处理中断逻辑，可以使代码更加清晰和易于理解。将中断操作封装在 Promise 中，可以提高代码的可读性和可维护性，同时也降低了出错的风险。

弊：

复杂性增加：引入中断操作可能会增加代码的复杂性，特别是当 Promise 链中存在多个步骤或依赖关系时。需要小心处理中断逻辑，确保正确地取消或中断相关的异步操作。
额外的开发工作：实现中断 Promise 需要编写额外的代码来处理中断逻辑，包括定义中断函数、处理取消或中断的条件等。这可能会增加开发工作量和代码量。
潜在的错误和问题：使用自定义的中断操作可能会引入潜在的错误和问题。例如，可能会出现不正确地处理中断的情况，或者在某些情况下无法正确地中断 Promise。需要小心处理这些问题，确保中断操作的正确性和稳定性。