当前位置: 首页 > news >正文

最新版axios@1.3.x取消请求-AbortController-初体验-番茄出品

最新版axios@1.3.x取消请求-AbortController-初体验-番茄出品

start

  • 前文提到,axios 中的取消请求,包含两种方式:

    • AbortController
    • CancelToken
  • 上篇文章讲解了 CancelToken,今天这篇文章来了解一下 AbortController;

  • 作者:lazy_tomato

  • 编写时间:2023/02/27 21/48

1. AbortController 是什么?

1.1 介绍

AbortController 接口表示一个控制器对象,允许你根据需要中止一个或多个 Web 请求。

1.2 MDN官方文档

MDN官方文档 点击这里:

在这里插入图片描述

1.3 官方文档使用案例

let controller;
const url = 'video.mp4';const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');downloadBtn.addEventListener('click', fetchVideo);abortBtn.addEventListener('click', () => {if (controller) {controller.abort();console.log('中止下载');}
});function fetchVideo() {controller = new AbortController();const signal = controller.signal;fetch(url, { signal }).then((response) => {console.log('下载完成', response);}).catch((err) => {console.error(`下载错误:${err.message}`);});
}

1.3 兼容性

在这里插入图片描述

  1. 可以在 caniuse.com 中 查看到对 AbortController 的解释;
Controller object that allows you to abort one or more DOM requests made with the Fetch API.控制器对象,该对象允许您中止使用 Fetch API 发出的一个或多个DOM请求。
  1. 原生 AbortController 不支持 IE 全系列

2. axios 中的 AbortController 如何作用

新版旧版差异:

在这里插入图片描述

由上图可以查看到:

  1. axios 对旧版本的 CancelToken 用法,还是保留了兼容处理;

  2. 最新版本的 axios,提供了对 signal 属性的判断;

  3. 在浏览器端,使用的都是 XMLHttpRequest 发起请求的;

在这里插入图片描述

3. 总结

总的来说,截至目前,1. AbortController2. CancelToken;两者都可以实现取消请求。

  • 底层逻辑相同:都是通过传入配置参数,再手动触发对应参数的取消方法。

  • 差异:传入的配置对象不同。

相关文章:

最新版axios@1.3.x取消请求-AbortController-初体验-番茄出品

最新版axios1.3.x取消请求-AbortController-初体验-番茄出品 start 前文提到,axios 中的取消请求,包含两种方式: AbortController;CancelToken; 上篇文章讲解了 CancelToken,今天这篇文章来了解一下 Abor…...

Git的简述

Git 文章目录GitGit概述版本控制工具集中式管理控制工具分步式管理控制工具控制机制Git和代码托管中心安装Git软件Git常用命令Git概述 Git是一个免费的、开源的分步式版本控制系统,可以快速的处理从小型到大型的各种项目 Git 易于学习,占地面积小&…...

webpack实战,手写loader和plugin

序言 对于 webpack 来说, loader 和 plugin 可以算是需求程度最为广泛的配置项了。但是呢,单单止步于配置可能还不够。如果我们自己有时候想要 diy 一个需求,但是 webpack 又没有相关的 loader 和 plugin 。那这个时候我们可能就得开始造点轮…...

STM32CubeMX按键模块化 点灯

本文代码使用 HAL 库。 文章目录前言一、按键原理图二、CubeMX 创建工程三、代码讲解:1. GPIO的输入HAL库函数:2. 消抖:3. 详细代码四,实验现象:总结前言 我们继续讲解 stm32 f103,这篇文章将详细 为大家讲…...

C#专栏目录(长期更新)

文章目录C# 基础C#进阶C#应用WPF基础WPF 3D小游戏C# 基础 1996年,微软用年薪三百万美刀的价格从Borland挖来了大神海尔斯伯格,开始了J开发,用以对抗Java。但SUN公司认为此举违反了Java开发平台的中立性,对微软提出诉讼。C#正是在…...

BurpSuite配置抓取HTTPS数据包

简介 我们在渗透测试的过程中,经常会遇到HTTPS的网站,Burp默认是没有办法抓取HTTPS的包的,想要让Burp抓取Https的包也很好办,只需要浏览器安装相关的证书即可,接下来将配置过程做一个记录。 前置条件: 1.J…...

图片转base64格式返回给前端,前端如何展示?

图片以base64形式在页面上展示出来在这里要说到Data URI scheme,它可以直接将一些小的数据直接嵌入到网页中,不需要再引入。支持格式如下data:, 文本数据data:text/plain, 文本数据data:text/html, HTML代码data:text/html;base64, base64编码的HTML代码…...

C++入门知识【超详解】

目录1.认识Chello worldC关键字2.命名空间3.std标准库4.输入输出5.缺省参数6.函数重载7.引用7.1引用的概念7.2引用的场景1.作参数2.作返回值7.3引用的注意点7.4指针和引用的区别8.auto关键字9.基于范围的for循环10.内联函数10.1概念10.2特征11. C98中的指针空值1.认识C hello …...

零基础、非计算机系学Python该如何上手?

首先我觉得要放平心态,不用过多去纠结是不是专业出身这回事。 想学那就认真去学,我们最终目标是掌握Python这门技能。 非计算机专业同时零基础,想自学Python该如何上手?分享我自学Python的几点建议吧。 1、重视基础 Python是一…...

关于 vue3 模板引用

文章目录前言1.访问模板引用2.v-for中的模板引用3.组件上的ref前言 如果我们需要直接访问组件中的底层DOM元素,可使用vue提供特殊的ref属性来访问 1.访问模板引用 在视图元素中采用ref属性来设置需要访问的DOM元素 a. 该ref属性可采用字符值的执行设置 b. 该ref属…...

Redis | 安装Redis和启动Redis服务

目录 一、Redis简介 1.1 简介 二、Redis安装 2.1 Windows安装Redis 2.2 Linux安装Redis 三、Redis服务启动和停止 3.1 Windows启动Redis服务 3.2 Linux启动Redis服务 四、Redis设置密码远程连接 4.1 为Redis登陆设置密码 4.2 设置Redis允许远程连接 五、Redis常…...

博客要考虑的最佳WordPress主题

有太多的选择会瘫痪你做决定的能力。有太多的WordPress主题,但仅仅只需要一个并且它是要合适的。我们建立了数十个 WordPress 博客并安装了数百个主题。根据我们所有的经验,我们发现Newspaper是大多数用户的最佳WordPress博客主题。这个自适应、强大的主…...

C 学习笔记 —— 函数指针

函数指针 上面的第二个char (* f) (int);写法就是函数指针的声明; 首先,什么是函数指针?假设有一个指向 int类型变量的指针,该指针储存着这个int类型变量储存在内存位置的地址。 同样,函数也有地址,因为函…...

FastDDS-3. DDS层

3. DDS层 eProsima Fast DDS公开了两个不同的API,以在不同级别与通信服务交互。主要API是数据分发服务(DDS)数据中心发布订阅(DCPS)平台独立模型(PIM)API,简称DDS DCPS PIM&#xf…...

9.2 IGMPv2

实验目的 (1) 熟悉IGMPv2的应用场景 (2) 掌握IGMPv2的配置方法 实验拓扑 实验拓扑如图9-17所示: 图9-17:IGMPv2 实验步骤 配置IP地址(请参考上一个实验)运行IGP&#xff…...

巨头混战,抢着“兜底”自动驾驶安全

诚然,中国汽车行业的发展绝对不会拘泥于电动化,必定会在电动化的基础上,迎接下半场的快速智能化。 2021年6月,长城汽车线控底盘全球首次发布。 彼时,长城汽车技术副总裁宋东先宣布,整合了线控转向、线控制…...

RightCapital 第一轮面试题

现在我们就马上开始吧! 答案在文末 JavaScript 是一门单线程的静态类型语言(单选题) 正确 错误 在 JavaScript 中下面哪种类型的值是不可变的(immutable)(单选题) Object Symbol Array Date …...

Python曲线肘部点检测-膝部点自动检测

文章目录一. 术语解释二. 拐点检测肘部法则是经常使用的法则。很多时候,可以凭人工经验去找最优拐点,但有时需要自动寻找拐点。最近解决了一下这个问题,希望对各位有用。一. 术语解释 **肘形曲线(elbow curve)**类似人胳膊状的曲线&#xff…...

【算法题】最大矩形面积,单调栈解法

力扣:84. 柱状图中最大的矩形 给定 n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。 求在该柱状图中,能够勾勒出来的矩形的最大面积。 题意很简单,翻译一下就是:求该图中…...

活动策划|深度分析年货节活动该如何策划!

四月初,不平凡的初春开始恢复往日的平静。对于新零售行业,疫情的缓解也逐渐平稳生态链的运转。2020年新零售的格局在洗礼后,业务的聚焦点也从前端促销转移到后端履约的体验闭环,同时很大程度的推进企业在危机公关下的应对。618大促…...

Idea启动遇到 Web server failed to start. Port 8080 was already in use. 报错

Idea启动遇到问题-记录 报错英文提示: APPLICATION FAILED TO START Description: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to liste…...

Python3中zip()函数知识点总结

1.引言 在本文中,我将带领大家深入了解Python中的zip()函数,使用它可以提升大家的工作效率。 闲话少说,我们直接开始吧! 2. 基础知识 首先,我们来介绍一些基础知识点: Python中的某些数据类型是不可变的…...

过滤器,监听器,拦截器的原理与在Servlet和Spring的应用

在Java Web的开发中,最原始和初期的学习都是从Servlet开始的,Servlet是Java最为耀眼的技术,也是Java EE的技术变革。目前大火主流的框架spring boot也的spring mvc部分也是基于拓展servlet完成的。回到之前的文章spring 实现了对servlet的封装…...

minio spring boot 秒传、分片上传、断点续传文件实现

此处后端使用的是前期封装的自定义starter,具体链接可参考:minio对象存储spring boot starter封装组件 这里主要针对前期封装的组件,做一个简单的应用,前端直传可查看之前的文章 秒传 秒传的逻辑比较简单,在前传上传…...

MTK平台使用Omnipeek分析空口协议讲解

讲解这个之前,我们先来了解下beacon/robe Request/Probe Response 三种帧 beacon帧 信标帧,由AP以一定的时间间隔周期性发出,以此来告诉外界自己无线网络的存在。 Beacon帧作为802.11中一个周期性的帧,Beacon周期调高,对应睡眠周期拉长,故节能(即越来休息100ms再起来…...

string和自动推断类型

欢迎来观看温柔了岁月.c的博客目前设有C学习专栏C语言项目专栏数据结构与算法专栏目前主要更新C学习专栏,C语言项目专栏不定时更新待C专栏完毕,会陆续更新C项目专栏和数据结构与算法专栏一周主要三更,星期三,星期五,星…...

【软件测试】从功能到自动化测试,测试人的进阶之路细节,这些必不可少......

目录:导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜)前言 测试流程&#xff0…...

C语言青蛙跳台阶【图文详解】

青蛙跳台阶前言1. 题目介绍2. 解题思路3. 利用图片来演示青蛙跳台阶的原理4. 如何用C语言实现青蛙跳台阶前言 在本文,我们要与一只活泼可爱的小青蛙合作,带领着它跳上台阶,这个小家伙精力充沛,特别擅长于跳跃。我们要让它做我们的…...

笔记(五)——list容器的基础理论知识

list容器是一个双向链表容器&#xff0c;可以高效地进行插入删除元素&#xff0c;但是不能随机存取元素&#xff08;不支持at()和[]操作符&#xff09;。一、list容器的对象构造方法list对象采用模板类的默认构造形式例如list<T> lst&#xff1b;#include<iostream>…...

浅谈网络中接口幂等性设计问题

所谓幂等性设计&#xff0c;就是说&#xff0c;一次和多次请求某一个资源应该具有同样的副作用。用数学的语言来表达就是&#xff1a;f(x) f(f(x))。 在数学里&#xff0c;幂等有两种主要的定义。 在某二元运算下&#xff0c;幂等元素是指被自己重复运算&#xff08;或对于函数…...

网站建设公司 跨界鱼科技专业/信息流优化师前景

一、问题的存在日常报错&#xff1a;日常解决分析&#xff1a;日常报错&#xff0c;首先是看日志&#xff0c;这是都是教训总结出来的经验啊...好了&#xff0c;这次是PHP报错&#xff0c;“Redis” not found&#xff0c;要么Redis扩展没装&#xff0c;要么Redis版本不兼容&am…...

贵州建设监理协会网站/公司网站建设步骤

MySql noinstall-5.1.xx-win32 配置(原创)1、解压mysql-noinstall-5.1.xx-win32.zip 到你喜欢的目录,例如&#xff1a;d:\php\mysql2、在根目录d:\php\mysql中有五个配置信息文件&#xff1a;my-small.ini (内存 < 64M)my-medium.ini (内存 128M )my-large.ini (内存 512M)m…...

建立企业网站费用/域名服务器查询

leetcode1477. 找两个和为目标值且不重叠的子数组 给你一个整数数组 arr 和一个整数值 target 。 请你在 arr 中找 两个互不重叠的子数组 且它们的和都等于 target 。可能会有多种方案&#xff0c;请你返回满足要求的两个子数组长度和的 最小值 。 请返回满足要求的最小长度…...

泰安网站制作/常见的营销手段

http://edu.csdn.net/course/detail/2798?locationNum13&fps1...

wordpress+存储视频/热词分析工具

在所有的批评家中&#xff0c;最伟大的、最正确的、最天才的是时间。&#xff0d;别林斯基...

个人网站可以做网上支付吗/爱链接外链购买

文/曾响铃 2月23日&#xff0c;银监会发布《网络借贷资金存管业务指引》&#xff08;以下简称《指引》&#xff09;&#xff0c;将通过资金存管机制&#xff0c;加强对网贷资金交易流转环节的监督管理。正如相关监管部门领导在会上指出&#xff0c;《指引》是监管层决心支持行业…...