在本博客中，我将引导您完成使用 JavaScript 取消提取请求的实际步骤，重点关注 AbortController API。最后，您将清楚地了解如何使您的网络应用程序更具响应性和资源友好性。

为什么需要取消获取请求？

取消获取请求在以下场景中至关重要：

• 用户体验：当用户离开页面时，无需继续获取该页面的数据。

• 搜索优化：在每次击键都会触发请求的搜索功能中，在发送新请求之前取消先前的请求会更有效。

• 超时场景： 如果出现网络延迟或长时间运行的请求，您可能需要设置超时并在超过一定持续时间时取消请求。

了解 AbortController

AbortController API 提供了一种优雅的方式来取消获取请求。它的工作原理是创建一个 AbortController 实例，该实例的信号被传递到获取请求。如果您在控制器上调用 abort() 方法，它将取消请求。

取消获取请求的分步指南

1。使用 AbortController 的基本设置

让我们从最基本的示例开始：创建 AbortController 并取消获取请求。

// Step 1: Create an instance of AbortController
const controller = new AbortController();

// Step 2: Pass the signal to the fetch request
fetch('https://jsonplaceholder.typicode.com/posts', { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log('Data:', data))
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('Fetch request was canceled');
        } else {
            console.error('Fetch error:', err);
        }
    });

// Step 3: Cancel the fetch request
controller.abort();

2.实际用例：取消用户交互请求
一种常见的情况是取消提取请求以响应用户交互。例如，在实现搜索功能时，每次击键都可能触发新的获取请求。取消先前的请求可防止处理过时或不相关的数据。

let controller;

function search(query) {
    // Cancel the previous request if it exists
    if (controller) {
        controller.abort();
    }

    // Create a new controller for the new request
    controller = new AbortController();

    // Fetch data with the new controller
    fetch(`https://jsonplaceholder.typicode.com/posts?query=${query}`, { signal: controller.signal })
        .then(response => response.json())
        .then(data => console.log('Search results:', data))
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Previous request canceled');
            } else {
                console.error('Fetch error:', err);
            }
        });
}

// Example usage: simulate user typing
search('React');
search('Vue'); // The request for 'React' is canceled

3.实现获取请求超时
在处理不可靠的网络条件时，超时至关重要。使用AbortController，您可以轻松实现超时机制，如果获取请求时间过长，则取消获取请求。

function fetchWithTimeout(url, timeout = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);

    return fetch(url, { signal: controller.signal })
        .then(response => {
            clearTimeout(timeoutId);
            return response.json();
        })
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Fetch request timed out');
            } else {
                console.error('Fetch error:', err);
            }
        });
}

// Example usage
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', 3000)
    .then(data => console.log('Data:', data));

优雅地处理获取请求取消

取消获取请求时，优雅地处理它们很重要。这涉及区分由取消引起的错误和其他类型的错误。

fetch(url, { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => {
        if (err.name === 'AbortError') {
            // Handle cancellation specifically
            console.log('Request was canceled');
        } else {
            // Handle other types of errors
            console.error('Request failed', err);
        }
    });