点亮API请求：取消Promise释放无畏之力

前端

2023-11-20 17:56:36

取消 Promise：异步编程的利刃

在异步编程中，Promise 是一种强大的工具，允许我们处理异步操作。然而，当我们需要取消这些操作时，它的局限性就会显现出来。本文将深入探究取消 Promise 的技巧，并提供最佳实践和代码示例，帮助你在异步编程的大海中扬帆远航。

取消 Promise 的场景

在以下情况下，取消 Promise 至关重要：

用户取消操作： 当用户取消操作或离开页面时，我们希望立即停止正在进行的请求，避免不必要的资源浪费。
网络问题： 当网络连接不稳定或超时时，等待 Promise 完成毫无意义，取消请求可以释放资源，并重新发起请求。
并发请求： 当发起并发请求时，当收到第一个响应时，我们可以取消其他未决的请求，优化性能。
组件卸载： 在 React 等组件化框架中，当组件卸载时，与该组件关联的 Promise 需要被取消，防止内存泄漏。

最佳实践

取消 Promise 的最佳实践包括：

使用 abortController： 这是取消 Promise 的首选方式，兼容性好，易于使用。
设置超时： 为 Promise 设置超时，当超时发生时自动取消 Promise。
手动抛出错误： 在 Promise 内部抛出错误可以手动取消 Promise。
使用库： 存在一些库可以简化 Promise 取消的过程，例如 "axios" 和 "bluebird"。

代码示例

使用 abortController：

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

fetch(url, { signal })
  .then(response => {
    // 请求成功处理
  })
  .catch(error => {
    // 请求失败处理
  });

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

设置超时：

const timeoutId = setTimeout(() => {
  promise.cancel();
}, 5000); // 5 秒超时

// 取消超时
clearTimeout(timeoutId);

手动抛出错误：

const promise = new Promise((resolve, reject) => {
  // ...

  // 取消请求
  reject(new Error('请求已取消'));
});

使用 axios 库：

const axios = require('axios');

const source = axios.CancelToken.source();
const request = axios.get(url, { cancelToken: source.token });

// 取消请求
source.cancel();