使用【AbortController】终止请求

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

基本用法:

  1. 创建一个 AbortController 实例:

    javascript 复制代码
    const controller = new AbortController();
  2. 通过 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);
        }
      });
  3. 终止请求 : 当你需要取消 fetch 请求时,可以调用 controller.abort() 方法。

    javascript 复制代码
    controller.abort();

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

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

相关推荐
大虾写代码几秒前
nvm和nrm的详细安装配置,从卸载nodejs到安装NVM管理nodejs版本,以及安装nrm管理npm版本
前端·npm·node.js·nvm·nrm
星哥说事1 分钟前
下一代开源 RAG 引擎,让你的 AI 检索与推理能力直接起飞
前端
....4921 分钟前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js
machinecat4 分钟前
Webpack模块联邦 - vue项目嵌套react项目部分功能实践
前端·webpack
今禾5 分钟前
深入浅出:ES6 Modules 与 CommonJS 的爱恨情仇
前端·javascript·面试
前端小白19955 分钟前
面试取经:Vue篇-Vue2响应式原理
前端·vue.js·面试
子兮曰5 分钟前
⭐告别any类型!TypeScript从零到精通的20个实战技巧,让你的代码质量提升300%
前端·javascript·typescript
前端AK君6 分钟前
如何开发一个SDK插件
前端
小满xmlc6 分钟前
WeaveFox AI 重新定义前端开发
前端
日月晨曦8 分钟前
大文件上传实战指南:让「巨无霸」文件也能「坐高铁」
前端