js fetch请求中断的几种方式

1、通过AbortController

这是官方标准手段,真正意义的阻止请求(不支持ie)

后端接口设置的两秒返回数据

function myFetch() {const controller = new AbortController();const signal = controller.signal;fetch('http://localhost:3000/aaa/bbb', {method: 'post',signal,headers: {'Content-Type': 'application/json'}}).then(res => res.json()).then(res => {console.log(res);return res;}).catch(e => {console.log(e);})// setTimeout(()=> {//     controller.abort();// }, 1000)
}

默认结果:
在这里插入图片描述
解开定时器后:
![在这里插入图片描述](https://img-blog.csdnimg.cn/49a12cad0df74597a88e34d1a1d027b4.png

在这里插入图片描述

2、模拟中断

通过promise,成功用resolve返回,失败用reject返回(浏览器上,请求依然会发出,并得到响应)
第一种方法:

function getData() {return new Promise((resolve, reject) => {myFetch().then(res => {resolve(res);});setTimeout(() => {reject({code: '500',msg: '请求失败'})}, 1000);})
}async function gotData() {try {const data = await getData();console.log(data);} catch (error) {console.log(error);}
}
gotData();

运行结果:
在这里插入图片描述
第二种方法:

function getData() {let myReject = null;let myPromise = new Promise((resolve, reject) => {myReject = reject;myFetch().then(res => {resolve(res);});});myPromise.abort = () => myReject({code: '500',msg: '请求失败'});return myPromise;
}async function gotData() {const result = getData();result.then(res => {console.log(res);}).catch(e => {console.log(e);})setTimeout(() => {result.abort();}, 1000);
}
gotData();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/96133.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx 配置文件的完整指南 (一)

文章目录 一、简介1.1 配置文件一览 二、全局配置2.0 user2.1 worker_processes2.2 events模块2.3 http模块 三、server模块3.1 listen3.2 server_name3.3 location:请求处理位置 Nginx 配置文件的完整指南 (二) 一、简介 Nginx是一款高性能的Web服务器和反向代理服…

AWS EKS 集群自动扩容 Cluster Autoscaler

文章目录 一,需求工作需求说明 二,部署精简命令执行1,要求2,查看EC2 Auto Scaling groups Tag3,创建Serviceaccount需要的Policy,Role4,部署Cluster Autoscaler5,验证6,常…

深入探析设计模式:工厂模式的三种姿态

深入探析设计模式:工厂模式的三种姿态 1. 简单工厂模式1.1 概念1.2 案例1.3 优缺点 2. 抽象工厂模式2.1 概念2.2 案例:跨品牌手机生产2.3 优缺点 3. 超级工厂模式3.1 概念3.2 案例:动物园游览3.3 优缺点 4. 总结 欢迎阅读本文,今天…

vscode | linux | c++ intelliense 被弃用解决方案

每日一句,vscode用的爽是爽,主要是可配置太强了。如果也很会研究,可以直接去咸鱼接单了 废话少说,直接整。 用着用着说是c intelliense被弃用,很多辅助功能无法使用,像查看定义、查看引用、函数跳转、智能提…

springboot集成ES

1.引入pom依赖2.application 配置3.JavaBean配置以及ES相关注解 3.1 Student实体类3.2 Teacher实体类3.3 Headmaster 实体类4. 启动类配置5.elasticsearchRestTemplate 新增 5.1 createIndex && putMapping 创建索引及映射 5.1.1 Controller层5.1.2 service层5.1.3 ser…

sass笔记

声明变量 通过$标识符进行命名及引用混合器 类似vue中的函数 通过 mixin标识定义 include 标识调用& 父选择器标识extend 进行继承可嵌套可导入 通过 import 文件位置’ 、进行导入 <style> //1 声明变量 $name: 15px; $color: skyblue;mixin border-radius($num) {/…

进入嵌入式之后究竟会干些什么?

嵌入式被称为互联网、计算机行业的万金油&#xff0c;未来的就业方向多种多样&#xff0c;工作内容也不一而足&#xff0c;但可以分为如下几个角度&#xff1a; 架构师 在大型企业中&#xff0c;一个人很难承担过多的任务&#xff0c;因为这会带来很大的风险。大企业更需要在…

“RFID与光伏板的完美融合:探索能源科技的新时代!“

随着科技的不断发展&#xff0c;人类创造出了许多令人惊叹的发明。其中&#xff0c;RFID&#xff08;Radio Frequency Identification&#xff09;技术的应用在各个领域日益广泛。最近的研究表明&#xff0c;将RFID技术应用于光伏板领域&#xff0c;不仅可以提高光伏板的效率&a…

Java进阶(4)——结合类加载JVM的过程理解创建对象的几种方式:new,反射Class,克隆clone(拷贝),序列化反序列化

目录 引出类什么时候被加载JVM中创建对象几种方式1.new 看到new : new Book()2.反射 Class.forName(“包名.类名”)如何获取Class对象【反射的基础】案例&#xff1a;连接数据库方法 3.克隆&#xff08;拷贝&#xff09;clone浅拷贝深拷贝案例 序列化和反序列化对象流-把对象存…

intelij idea 2023 创建java web项目

1.点击New Project 2.创建项目名称为helloweb &#xff0c;jdk版本这里使用8&#xff0c;更高版本也不影响工程创建 点击create 3.新建的工程是空的&#xff0c;点击File-> Project Structure 4.点击Modules 5.点击加号&#xff0c;然后键盘输入web可以搜索到web模块&…

完全备份、增量备份、差异备份、binlog日志

Top NSD DBA DAY06 案例1&#xff1a;完全备份与恢复案例2&#xff1a;增量备份与恢复案例3&#xff1a;差异备份与恢复案例4&#xff1a;binlog日志 1 案例1&#xff1a;完全备份与恢复 1.1 问题 练习物理备份与恢复练习mysqldump备份与恢复 1.2 方案 在数据库服务器192…

考研408 | 【计算机网络】 传输层

导图 传输层的功能 传输层的两个协议 传输层的寻址与端口 UDP协议 UDP的主要特点 UDP首部格式&#xff1a; UDP校验&#xff1a; TCP协议 TCP协议的特点 TCP报文段首部格式 TCP连接管理 TCP的连接建立 SYN洪泛攻击 TCP的连接释放 TCP可靠传输 序号&#xff1a; 确认&#xff1…

三本书与三场发布会,和鲸社区重新定义编程类书籍从阅读到实践新体验

当 AI 开发者社区配备 AI 基础设施开发平台工具时&#xff0c;它还能做什么&#xff1f; 答案是&#xff1a;过去半年&#xff0c;和鲸社区凭借在气象、医学、社科等垂直领域的长期积累以及多方伙伴的支持&#xff0c;联合举办了三场新书发布会——从 Python 到 R 语言 、从气…

虚拟机远程连接出现 Connection refused: connect问题(已解决)

如果你也跟我一样出现了这样的问题&#xff0c;并且网上的方法试了都不行&#xff0c;不妨试试我的简单粗暴的方法&#xff0c; 那就是拔网线&#xff0c;我的就是拔网线&#xff0c;重新连接就行了&#xff0c;佛了

【从0开始学架构笔记】01 基础架构

文章目录 一、架构的定义1. 系统与子系统2. 模块与组件3. 框架与架构4. 重新定义架构 二、架构设计的目的三、复杂度来源&#xff1a;高性能1. 单机复杂度2. 集群复杂度2.1 任务分配2.2 任务分解&#xff08;微服务&#xff09; 四、复杂度来源&#xff1a;高可用1. 计算高可用…

【网络教程】如何创建/添加钉钉机器人以及如何获取机器人的Token/Secret

文章目录 创建钉钉机器人添加钉钉机器人获取机器人的Token/Secret相关网站创建钉钉机器人 这里以PC端的操作为例,按照如下操作进行 访问 钉钉开放平台选择机器人选项卡,点击右上角的创建应用,这里会有一个弹窗,我这里选择的是继续使用旧版,如图按照要求填写相关信息创建自…

Linux实用运维脚本分享

Linux实用运维脚本分享&#x1f343; MySQL备份 目录备份 PING查询 磁盘IO检查 性能相关 进程相关 javadump.sh 常用工具安装 常用lib库安装 系统检查脚本 sed进阶 MySQL备份 #!/bin/bashset -eUSER"backup" PASSWORD"backup" # 数据库数据目录…

2024浙大MBA/MEM/MPA四个月冲刺备考策略

近期收到很多考生的咨询&#xff1a;距离联考就仅剩四个多月的时间&#xff0c;这个管理类联考的难度如何&#xff1f;主要考些什么内容&#xff1f;现在才开始备考还有希望上岸浙大吗&#xff1f;是不是要等到明年在开始备考比较合适&#xff1f;那么今天在这里小立老师就跟大…

分布式锁有哪些应用场景和实现?

电商网站都会遇到秒杀、特价之类的活动&#xff0c;大促活动有一个共同特点就是访问量激增&#xff0c;在高并发下会出现成千上万人抢购一个商品的场景。虽然在系统设计时会通过限流、异步、排队等方式优化&#xff0c;但整体的并发还是平时的数倍以上&#xff0c;参加活动的商…

【100天精通python】Day39:GUI界面编程_PyQt 从入门到实战(下)_图形绘制和动画效果,数据可视化,刷新交互

目录 专栏导读 6 图形绘制与动画效果 6.1 绘制基本图形、文本和图片 6.2 实现动画效果和过渡效果 7 数据可视化 7.1 使用 Matplotlib绘制图表 7.2 使用PyQtGraph绘制图表 7.3 数据的实时刷新和交互操作 7.3.1 数据的实时刷新 7.3.2 交互操作 7.4 自定义数据可视化…