使用【AbortController】终止请求

起风的秋天@2024-06-10 15:33

AbortController 是一个 Web API，用于终止一个或多个 Web 请求。当你使用 fetch API 发送异步请求时，你可能需要在某些情况下主动终止这些请求。使用 AbortController 可以实现这一功能。

基本用法：

创建一个 AbortController 实例:
javascript 复制代码
```
const controller = new AbortController();
```

通过 controller.signal 获取信号，并在 fetch 请求中使用它:

javascript 复制代码

fetch(url, { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', err);
    }
  });

终止请求 : 当你需要取消 fetch 请求时，可以调用 controller.abort() 方法。
javascript 复制代码
```
controller.abort();
```

使用 AbortController 可以让你更好地控制资源和提高应用的性能，尤其是在处理需要长时间等待的请求或者在组件卸载时取消未完成的请求时非常有用。

笔者在react中取消请求，遇到了此问题，记录一下，共勉！