使用【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中取消请求,遇到了此问题,记录一下,共勉!

相关推荐
小桥风满袖1 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang1 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793081 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
李重楼1 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu1 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin1 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
brzhang1 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构
lecepin3 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒3 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端