使用【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 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书