停止异步函数 JavaScript

当你在编写异步函数的时候，可能会遇到一些情况需要停止该异步函数的执行。在 JavaScript 中，我们可以使用一个叫做 Promise 的对象来解决这个问题。

Promise

Promise 是一种最常用的处理异步操作的方式。我们可以创建一个 Promise 对象，然后在其中执行一个异步操作，最后返回结果。

下面是一个简单的 Promise 示例：

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => {
      resolve(image);
    };
    image.onerror = () => {
      reject(new Error('Could not load image at ' + url));
    };
    image.src = url;
  });
}

const url = 'https://example.com/image.jpg';
loadImage(url)
  .then((image) => {
    console.log('Image loaded:', image);
  })
  .catch((error) => {
    console.error(error);
});

上面的代码中，我们创建了一个名为 loadImage 的函数，它返回一个 Promise 对象。在 Promise 对象的构造函数中，我们创建了一个新的 Image 对象并将其加载到指定的 URL。当图片加载成功时，我们调用 resolve 函数来返回 Image 对象。如果出现任何错误，我们调用 reject 函数来返回一个 Error 对象。

在 then 方法中，我们可以处理 Promise 返回的结果。在这个例子中，我们简单地将 Image 对象打印到控制台中。如果出现任何错误，我们可以在 catch 方法中捕获并处理它们。

停止异步函数

如果在异步函数中需要停止某些操作，我们可以使用一个名为 abort controller 的 API。AbortController API 是一个 web 标准，它为我们提供了一种在请求或者异步操作结束之前，可以随时停止操作的机制。

下面是一个使用 abort controller 的示例：

function loadImage(url, controller) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => {
      resolve(image);
    };
    image.onerror = () => {
      reject(new Error('Could not load image at ' + url));
    };
    controller.signal.addEventListener('abort', () => {
      reject(new Error('Image loading was aborted'));
    });
    image.src = url;
  });
}

const url = 'https://example.com/image.jpg';
const controller = new AbortController();
const signal = controller.signal;

const timeout = setTimeout(() => {
  controller.abort();
  clearTimeout(timeout);
}, 1000);

loadImage(url, controller)
  .then((image) => {
    console.log('Image loaded:', image);
  })
  .catch((error) => {
    console.error(error);
  });

上面的代码中，我们创建了一个名为 controller 的 AbortController 对象，并使用 signal 属性获取它的 AbortSignal 对象。在 loadImage 函数中，我们将 abort 事件添加到 abort signal 上，以便在操作被中止时触发。

我们还创建了一个 setTimeout 函数，当它完成时，它将调用 controller.abort() 方法中止异步操作。在 then 方法中，我们可以处理 Promise 返回的结果。在这个例子中，我们简单地将 Image 对象打印到控制台中。如果出现任何错误，我们可以在 catch 方法中捕获并处理它们。