如何终止 JavaScript 中的异步任务

<p>在 JavaScript 中执行异步任务时，如何优雅地取消这些任务，一直是个令人头疼的问题。毕竟，我们无法预料到任务是否会遇到错误，或者是否需要在执行过程中中止。好在，JavaScript 提供了多种方法来中止异步任务，让我们的代码更加灵活。</p>

<h2>Promise：取消任务的利器</h2>

<p>Promise 是 JavaScript 中处理异步任务的利器，它提供了一个 then() 方法来监听任务的状态变化。如果任务被取消，我们可以通过 then() 方法的第二个参数（即 catch()）来处理取消后的操作。</p>

<pre>
    const promise = new Promise((resolve, reject) => {
        // 模拟异步任务
        setTimeout(() => {
            if (shouldCancel) {
                reject('Task canceled');
            } else {
                resolve('Task completed');
            }
        }, 1000);
    });

    promise.then(result => {
        // 任务成功时的处理逻辑
        console.log(result);
    }, error => {
        // 任务被取消时的处理逻辑
        console.log(error);
    });
</pre>

<p>在上面的代码中，我们创建了一个 Promise 对象，并在其中模拟了一个异步任务。如果任务应该被取消，则使用 reject() 方法抛出一个错误，否则使用 resolve() 方法返回一个结果。然后，我们使用 then() 方法监听任务的状态变化，并在任务被取消时输出错误信息。</p>

<h2>abort()：终止 Fetch 请求</h2>

<p>对于 Fetch 请求，我们可以使用 abort() 方法来取消请求。abort() 方法会立即终止请求，并抛出一个 AbortError 错误。</p>

<pre>
    const controller = new AbortController();
    const signal = controller.signal;

    const request = new Request('https://example.com/api/data');

    fetch(request, {signal})
        .then(response => {
            // 请求成功时的处理逻辑
            console.log(response);
        })
        .catch(error => {
            // 请求被取消或出错时的处理逻辑
            console.log(error);
        });

    // 取消请求
    controller.abort();
</pre>

<p>在上面的代码中，我们创建了一个 AbortController 对象，并获取它的信号对象。然后，我们使用 fetch() 方法发送一个请求，并把信号对象作为参数传递。这样，当我们调用 abort() 方法时，就会取消请求，并抛出 AbortError 错误。</p>

<h2>总结</h2>

<p>在本文中，我们介绍了如何使用 Promise 和 abort() 方法来中止 JavaScript 中的异步任务。通过这些方法，我们可以更加灵活地控制异步任务，并避免不必要的资源浪费。希望这些技巧能够帮助您编写更加健壮和高效的 JavaScript 代码。</p>