Fetch request.signal 属性

request.signal 属性是 Fetch API 中的一个重要部分，它允许你在请求期间取消请求。这个属性返回一个 AbortSignal 对象，该对象可用于监听和处理请求的取消事件。

AbortController 和 AbortSignal

为了使用 request.signal 属性，你需要了解 AbortController 和 AbortSignal。这两个对象协同工作来管理请求的取消。

创建 AbortController 实例

首先，创建一个 AbortController 实例：

const controller = new AbortController();

通过实例化 AbortController，你可以控制请求的生命周期。接下来，你可以将这个控制器的信号传递给你的 Fetch 请求。

使用 AbortSignal 取消请求

当你需要取消请求时，可以简单地调用 controller.abort() 方法。这会触发 AbortSignal 的 abort 事件，从而允许你监听并处理这个事件。

// 监听 abort 事件
controller.signal.addEventListener('abort', () => {
    console.log('请求已取消');
});

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

在 Fetch 请求中使用 signal

在 Fetch 请求中，你可以通过 signal 属性传递 AbortSignal 对象，以便能够取消请求。

基本示例

下面是一个简单的示例，展示了如何在 Fetch 请求中使用 signal 属性：

// www.javascriptcn.com code example
const controller = new AbortController();

fetch('https://api.example.com/data', {
    signal: controller.signal
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
    if (error.name === 'AbortError') {
        console.log('请求已取消');
    } else {
        console.error('请求失败：', error);
    }
});

在这个例子中，如果请求被取消，catch 块会捕获到 AbortError 错误，并输出“请求已取消”。

动态取消请求

你也可以根据用户的操作动态地取消请求。例如，在用户点击按钮后取消请求：

<button id="cancel-button">取消请求</button>

document.getElementById('cancel-button').addEventListener('click', () => {
    controller.abort();
});

这样，当用户点击“取消请求”按钮时，请求会被取消，并且会在 catch 块中捕获到错误。

处理并发请求

在实际应用中，你可能会遇到多个并发请求的情况。使用 AbortController 和 AbortSignal 可以帮助你更优雅地管理这些请求。

示例：处理多个并发请求

假设你需要同时发起多个请求，但希望能够在用户离开页面时取消所有请求：

// www.javascriptcn.com code example
const controller = new AbortController();
const signal = controller.signal;

// 发起多个请求
const requests = [
    fetch('https://api.example.com/data1', { signal }),
    fetch('https://api.example.com/data2', { signal }),
    fetch('https://api.example.com/data3', { signal })
];

Promise.all(requests)
.then(responses => Promise.all(responses.map(r => r.json())))
.then(data => console.log(data))
.catch(error => {
    if (error.name === 'AbortError') {
        console.log('所有请求已取消');
    } else {
        console.error('请求失败：', error);
    }
});

// 用户离开页面时取消请求
window.addEventListener('beforeunload', () => {
    controller.abort();
});

在这个例子中，当用户关闭页面或导航离开当前页面时，所有正在进行的请求都会被取消。

总结

通过使用 AbortController 和 AbortSignal，你可以轻松地管理 Fetch 请求的取消。无论是单个请求还是并发请求，这些工具都能帮助你实现更灵活、更可控的请求管理。

以上就是关于 Fetch request.signal 属性的详细介绍。在实际开发中，合理利用这个功能可以让你的应用更加健壮和高效。