Fetch —— 中止尚未完成的接口请求

最新推荐文章于 2024-06-16 22:10:34 发布
最新推荐文章于 2024-06-16 22:10:34 发布
阅读量6.1k 收藏 2
点赞数
分类专栏： 前端小技巧 文章标签： 中止请求 fetch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wu_shuxuan/article/details/80831150
版权
当用户在页面间快速切换时，未完成的接口请求可能导致体验下降。本文介绍了如何利用AbortController来中止fetch请求，确保在离开页面时终止所有待处理请求，从而优化用户界面的响应速度。
摘要由CSDN通过智能技术生成
问题描述：

在项目开发中会遇到用户在一个页面中多次点击之后，再点击下一个页面。但是会遇到上一个页面的接口请求还在pending当中，第二个页面的接口请求会排队等待。这样就会非常影响用户的体验，所以要做到离开一个页面的同时也中止这个页面上所有尚未完成的接口请求。

问题解决：

  • 构造函数

    AbortController.AbortController()创建一个新的AbortController 对象实例。

  • 属性

    AbortController.signal 只读返回一个AbortSignal对象实例，它可以用来 with/abort 一个DOM请求

  • 方法

    AbortController.abort()中止一个尚未完成的DOM请求。这能够中止fetch 请求，任何响应Body的消费者和流。

具体使用（react中）：

1、在componentDidMount中实例化

  componentDidMount =() =>{
    if ("AbortController" in window) {
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
防止重复发送Ajax请求的解决方案
10-23
主要介绍了防止重复发送Ajax请求的解决方案，感兴趣的小伙伴们可以参考一下
Fetch超时设置与终止请求详解
11-30
1.基本使用 Fetch 是一个新的端获取资源的接口，用于替换笨重繁琐XMLHttpRequest.它有了Request 和 Response 以及Headers对象的概念，与后端语言请求资源更接近。 一个简单的GET请求 fetch('https://www.baidu.com') .then(resp=>resp.text()) // 转换成文本对象 .then(resp=>console.log(resp)) // 输出请求内容 .catch(error => console.error(error)); 一个简单的POST请求 fetch('https://www.e
4.2、浏览器请求详解（ajax、fetch、axios使用，手写ajax）
最新发布
yolo
06-16 1011
Ajax 是Async Javascript And Xml的简称，它是原生JavaScript的一种请求方案，利用 XMLHttpRequest 进行异步请求数据，实现无感刷新数据；Fetch 是 ES6 新推出的一套异步请求方案，它天生自带 Promise，同时也是原生的，如果在较小项目中为了项目大小着想和兼容性不是那么高的前提下不妨可以用它来进行异步请求也是不错的；Axios 是基于 Ajax 和 Promise 封装的一个库，可以利用Promise来更好的管控请求回调嵌套造成的回调地狱；
开发中遇到的问题 注意：请求尚未完成
qq_37224757的博客
05-08 1674
记一次问题排查----Caution: request is not finished yet！ - 掘金 (juejin.cn)
获取未执行完的ajax,jquery的ajax请求尚未完成，就会接着执行后面的代码吗？
weixin_29541589的博客
08-06 510
当一个注册表单的提交按钮点击后，通过绑定的时间来确定用户名、邮箱等是否有效，最后来确定是否提交表单。先设置一个变量status值为true，然后通过ajax来判断用户名、邮箱等是否已经注册，如果已注册就在回调函数中设置status的值为false,最后再判断status的值是true还是false来决定是否提交。判断status的代码写在ajax的后面，但是还是先执行了判断status的代码，再执...
以antd项目内实践为例，中断指定fetch请求的方法
weixin_38122772的博客
07-13 875
因为fetch请求不像ajax有自带的abort方法，所以是使用 window.AbortController来实现中断请求 创建Signal和停止Signal的方法写入一个公共管理文件并导出 common.js // 创建一个signal export function newSignal(key) { if ("AbortController" in window) { window[key+'Controller'] = new AbortController(); } retur
vue axios 阻塞未完成请求
牛马程序员进阶之路
04-07 2905
import _ from 'lodash' import axios from 'axios' const { CancelToken, Cancel } = axios const tokens = {} /** * 请求前处理 config（尽可能在最先注册的拦截器中调用） * @param {import('axios').AxiosRequestConfig} config */ export const setConfig = function(config) { const { .
javascript实现fetch请求返回的统一拦截
10-15
JavaScript中的fetch API是一种现代的异步数据获取方式，它提供了更简洁、更符合Promise特性的接口来处理HTTP请求。然而，fetch默认并不提供请求和响应的拦截器，这对于需要进行全局处理，比如鉴权、错误处理等场景...
fetch请求超时
05-03
fetch请求超时，在fetch的基础上做的可以设置超时时间的 javascript 插件，具体使用请查看我的博客 https://blog.csdn.net/yumikobu/article/details/80167982
fetch 如何实现请求数据
10-17
主要介绍了fetch 如何实现请求数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解使用fetch发送post请求时的参数处理
11-28
在现代Web开发中，`fetch` API已经成为发送Ajax请求的标准方式，它提供了更简洁和灵活的接口。然而，当你尝试使用`fetch`进行POST请求时，可能会遇到一些问题，特别是处理参数方面。本文将深入探讨如何正确地使用`...
前端面试题摘要（尚未完成）
qq_38102905的博客
07-29 388
get 和 post 的区别 最直观的区别就是 get 参数放在 URL 里, post 请求的参数放在 request body里 get url 的最长多少 256个字节 post 请求体 body 的最大是多少 post 请求体理论上来讲是没有限制的 在本地tomcat上限制大小为2M cors 攻击 http 协议和 tcp/ip 协议的区别 tcp/ip 三次握手完成传输信息 http 协议是建立在TCP协议之上的一种应用 数组和链表的区别 数组 以电影院位置作比喻 数组在内存中好比电影
fetch下载文件，并带有进度条展示
milimu的博客
01-10 1161
【代码】fetch下载文件，并带有进度条展示。
chrome浏览器项目登陆页面卡死，XHR查看ajax请求一直在pending状态
Im5516的博客
12-28 4677
项目开发时登陆测试环境验证问题，使用新的tab页面打开该地址，登陆时页面卡死白屏，卡死前打开F12查看控制台中的ajax请求，显示部分请求始终处于pending状态，最终导致页面白屏，一段时间后弹窗提示“页面无响应”，使用接口测试工具确认所有pengding的接口均正常。其他同事相同版本浏览器可以登陆。 通过网络查询该问题，无相关结果，大部分说发是后台有断点、请求超时等待之类的。而我可以确认接口本身没有问题，后来决定重装浏览器，准备先看下chrome中的设置页面，有个重置功能，点击，确定，再试登陆，好了。.
js页面轮询请求数据,离开页面清除
weixin_45389051的博客
03-21 193
【代码】js页面轮询请求数据,离开页面清除。
前端发送请求，显示超时取消
zcxbd的博客
04-24 968
1、前端设置60s超时则取消2、后台接口响应时间过长，过长的原因统计的数据量多（实际也才17w多）
Fetch超时设置和终止请求
weixin_34375233的博客
05-16 261
1.基本使用 Fetch 是一个新的端获取资源的接口，用于替换笨重繁琐XMLHttpRequest.它有了Request 和 Response 以及Headers对象的概念，与后端语言请求资源更接近。 一个简单的GET请求 fetch('https://www.baidu.com') .then(resp=>resp.text()) // 转换成文本对象 ...
优雅的终止Fecth和异步任务
wb1991wb的博客
11-21 839
前面说到AbortController也可取消其他的异步任务，现在我们来看看吧,其实就是利用AbortController对象的singal属性的abort事件来取消自定义异步任务//这里使用setTimeout来模拟异步任务 const timer = setTimeout(function() {} } ​console . log(err) }) //异步任务在2s后取消 setTimeout(function() {利用singal属性，abort方法就可以终止异步任务对象执行。
关于谷歌浏览器Chrome正在处理请求的问题解决
runwuwushengxiyu的博客
10-20 1407
关于谷歌浏览器Chrome正在处理请求的问题解决
vue3中如何使用fetch请求接口数据
03-26
3. 使用async/await关键字，调用fetch方法进行接口请求，获取数据： async function fetchData() { const response = await fetch(apiUrl); const data = await response.json(); return data; } 4. 将...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值