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();

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

京东门详一码多端探索与实践 | 京东云技术团队

本文主要讲述京东门详业务在支撑过程中遇到的困境,面对问题我们在效率提升、质量保障等方向的探索和实践,在此将实践过程中问题解决的思路和方案与大家一起分享,也希望能给大家带来一些新的启发 一、背景 1.1、京东门详介绍 1.1.1、京东门…

【项目实践】基于LSTM的一维数据扩展与预测

基于LSTM的一维数据拟合扩展 一、引(fei)言(hua) 我在做Sri Lanka生态系统服务价值计算时,中间遇到了一点小问题。从世界粮农组织(FAO)上获得Sri Lanka主要农作物产量和价格数据时,其中的主要作物Sorghum仅有2001-2006年的数据,而Millet只有…

《凤凰架构》第二章——访问远程服务

前言 这章挺难的,感觉离我比较远,不太好懂,简单记录吧。 这章主要讲访问远程服务,主要对比了RPC和REST的区别,可以结合知乎上的文章《既然有 HTTP 请求,为什么还要用 RPC 调用?》 这篇文章进行…

genism word2vec方法

文章目录 概述使用示例模型的保存与使用训练参数详解([原链接](https://blog.csdn.net/weixin_44852067/article/details/130221655))语料库训练 概述 word2vec是按句子来处理的Sentences(句子们) 使用示例 from gensim.models import Word2Vec #sent…

JMeter 特殊组件-逻辑控制器与BeanShell PreProcessor 使用示例

文章目录 前言JMeter 特殊组件-逻辑控制器与BeanShell PreProcessor 使用示例1. 逻辑控制器使用1.1. While Controller 使用示例1.2. 如果(If)控制器 使用示例 2. BeanShell PreProcessor 使用示例 前言 如果您觉得有用的话,记得给博主点个赞…

Spring Security6 最新版配置该怎么写,该如何实现动态权限管理

Spring Security 在最近几个版本中配置的写法都有一些变化,很多常见的方法都废弃了,并且将在未来的 Spring Security7 中移除,因此又补充了一些新的内容,重新发一下,供各位使用 Spring Security 的小伙伴们参考。 接下…

redis十种数据类型及底层原理

概述 Redis 是一个开源的高性能键值数据库,它支持多种数据类型,可以满足不同的业务需求。本文将介绍 Redis 的10种数据类型,分别是 string(字符串) hash(哈希) list(列表&#xf…

【C++】函数指针

2023年8月18日,周五上午 今天在B站看Qt教学视频的时候遇到了 目录 语法和typedef或using结合我的总结 语法 返回类型 (*指针变量名)(参数列表)以下是一些示例来说明如何声明不同类型的函数指针: 声明一个不接受任何参数且返回void的函数指针&#xf…

C# 读取pcd、ply点云文件数据

最近研究了下用pcl读取点云数据,又做了个C#的dll,方便读取,同样这个dll基于pcl 最新版本1.13.1版本开发。 上次做的需要先得到点云长度,再获取数据。这次这个定义了一个PointCloudXYZ类来存数据。将下面的dll拷贝到可执行目录下&a…

(五)、深度学习框架源码编译

1、源码构建与预构建: 源码构建: 源码构建是通过获取软件的源代码,然后在本地编译生成可执行程序或库文件的过程。这种方法允许根据特定需求进行配置和优化,但可能需要较长的时间和较大的资源来编译源代码。 预构建: 预…

诚迈科技荣膺小米“最佳供应商奖”

近日,诚迈科技受邀参加小米战略合作伙伴HBR总结会。诚迈科技以尽职尽责的合作态度、精益求精的交付质量荣膺小米公司颁发的最佳供应商奖,其性能测试团队荣获优秀团队奖。 诚迈科技与小米在手机终端方向一直保持着密切的合作关系,涉及系统框架…

视频汇聚集中存储EasyCVR平台调用iframe地址视频无法播放,该如何解决?

安防监控视频汇聚平台EasyCVR基于云边端一体化架构,具有强大的数据接入、处理及分发能力,可提供视频监控直播、云端录像、视频云存储、视频集中存储、视频存储磁盘阵列、录像检索与回看、智能告警、平台级联、云台控制、语音对讲、AI算法中台智能分析无缝…

new String()到底创建了几个对象

题目: new String("abc")会创建几个对象? 看字节码,就知道是两个。

跟左神刷算法02 基础

题目1 先根据难度拍个序,难度一样的按收入大的排序,因为他每份都有招无数份人。难度相同的就留一个最大的。难度增加了,而薪水变小了,直接丢掉。难度和薪水保持一个单调性就可以了。 用有序表取做。 key是排序的。 迅速查到小于…

Typora 相对路径保存图片以及 Gitee 无法显示图片

目录 Typora 相对路径保存图片 Gitee 无法显示图片 Typora 相对路径保存图片 Step1:修改 Typora 的偏好设置 自动在当前目录创建名为 "./${filename}.assets" 的文件夹粘贴图片到 md 中时,图片会自动另存到 "./${filename}.assets&qu…

postgresql 谨慎使用正则删除(%,_)

建表 CREATE TABLE public.ellistest (id bigserial NOT NULL,"name" varchar null,primary key (id) );插入数据 删除含有_线的数据 你会发现表被清空了 delete from ellistest where name like %_%原因 百分号(%)用于表示0、1或多个字符或数字。 下划线通配符…

第三届“赣政杯”网络安全大赛 | 赛宁筑牢安全应急防线

​​为持续强化江西省党政机关网络安全风险防范意识,提高信息化岗位从业人员基础技能,提升应对网络安全风险处置能力。由江西省委网信办、江西省发展改革委主办,江西省大数据中心、国家计算机网络与信息安全管理中心江西分中心承办&#xff0…

公告:微信小程序备案期限官方要求

备案期限要求 1、若微信小程序未上架,自2023年9月1日起,微信小程序须完成备案后才可上架,备案时间1-20日不等; 2、若微信小程序已上架,请于2024年3月31日前完成备案,逾期未完成备案,平台将按照…

变更通知在开源SpringBoot/SpringCloud微服务中的最佳实践

目录导读 变更通知在开源SpringBoot/SpringCloud微服务中的最佳实践1. 什么是变更通知2. 变更通知的场景分析3. 变更通知的技术方案3.1 变更通知的技术实现方案 4. 变更通知的最佳实践总结5. 参考资料 变更通知在开源SpringBoot/SpringCloud微服务中的最佳实践 1. 什么是变更通…

Flutter 测试小结

Flutter 项目结构 pubspec.yaml 类似于 RN 的 package.json,该文件分别在最外层及 example 中有,更新该文件后,需要执行的 Pub get lib 目录下的 dart 文件为 Flutter 插件封装后的接口源码,方便在其他 dart 文件中调用 example 目…