Fetch 请求的超时设置与终止请求

最新推荐文章于 2023-11-12 15:50:35 发布
最新推荐文章于 2023-11-12 15:50:35 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： javascript 网络协议 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HZ___ZH/article/details/119995615
版权
本文探讨了在JavaScript中如何为Fetch请求设置超时，并在超时时终止请求。通过结合Promise.race()和setTimeout，创建了一个同时处理fetch请求和超时的解决方案。当fetchPromise或timeoutPromise中任何一个先完成时，将返回相应的结果。
摘要由CSDN通过智能技术生成

要求

fetch 请求,3秒超时输出超时,不管成功与否,成功输出成功,失败输出失败。
考察实现：Fetch 请求的超时设置与终止请求

解决

在使用XMLHttpRequest可以设置请求超时时间，可是转用Fetch后，超时时间设置不见了,在网络不可靠的情况下，超时设置往往很有用

ES6以后Promise 出现解决地狱回调等不优雅的代码风格。个人理解这个更像是一个生产者和消费者的关系，查看 Promise文档，有以下两个方法

Promise.race([promise1,promise2]) 传入多个Promise对象，等待最快对象完成
Promise.all([promise1,promise2]) 传入多个Promise 对象，等待所有对象完成
有了以上知识后,结合函数setTimeout就可以实现超时设置

首先介绍下思路，核心就是利用建立一个超时的timeoutPromise和一个接口请求的fetchPromise，传入Promise.race()来进行处理。哪个Promise先返回结果则最终输出这个Promise的返回值。具体如下：

创建timeoutPromise

 let timeoutPromise = (timeout)
最低0.47元/天 解锁文章
Y or Z
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【javascript】如何给fetch请求设置超时时间，以及结合Promise使用的相关用法
IT部落格
11-23 2072
在javascript中，fetch函数是用来进行网络请求的，但默认情况下它是不支持超时设置的
Fetch超时设置与终止请求详解
11-30
然而，Fetch API 并没有内置的超时设置功能，这与XMLHttpRequest不同。为了实现超时控制，我们可以利用Promise.race()方法，它接受一个Promise数组并返回第一个完成的Promise的结果。结合setTimeout，我们可以创建一...
fetch请求超时
05-03
fetch请求超时，在fetch的基础上做的可以设置超时时间的 javascript 插件，具体使用请查看我的博客 https://blog.csdn.net/yumikobu/article/details/80167982
fetch设置请求超时处理
qllzs的博客
01-14 1068
getPhone() { //原fetch 请求 } // 请求超时限制 functionTime(time) { return new Promise((resolve, reject) => { setTimeout(() => { // eslint-disable-next-line prefer-promise-reject-errors
js fetch 设置超时
weixin_42608299的博客
01-19 974
使用 fetch 函数时可以在 options 参数中设置超时时间。可以使用 AbortController 来控制超时，示例代码如下： const controller = new AbortController(); const signal = controller.signal; setTimeout(() => { controller.abort(); }, 5000); ...
fetch函数没有默认超时时间的配置吗
最新发布
徐同保的专栏
11-12 3613
fetch函数没有默认超时时间的配置吗
javascript实现fetch请求返回的统一拦截
10-15
然而，fetch默认并不提供请求和响应的拦截器，这对于需要进行全局处理，比如鉴权、错误处理等场景并不方便。本篇文章主要探讨如何使用JavaScript实现fetch请求返回的统一拦截。 首先，我们需要理解拦截器的目的。...
fetch 如何实现请求数据
10-17
主要介绍了fetch 如何实现请求数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
axios 或 fetch 如何实现对发出的请求的终止?
weixin_43850639的博客
08-31 2096
终止 HTTP 请求是一个重要的功能，特别是在需要优化性能、避免不必要的请求或在某些事件发生时（例如用户点击取消）中断正在进行的请求时。以下是如何使用axios和fetch。
如何使 fetch() 请求超时
allway2的博客
02-17 5262
在开发使用网络的应用程序时，要记住的第一条规则是不要依赖网络。 网络不可靠，因为 HTTP 请求或响应可能由于多种原因而失败： 用户离线 DNS 查询失败 服务器没有响应 服务器响应但出现错误 和更多。 用户可以等待最多 8 秒来完成简单的请求。这就是为什么您需要对网络请求设置超时并在 8 秒后通知用户网络问题。 我将向您展示如何使用setTimeout()、中止控制器和fetch()API 来发出具有可配置超时时间的请求（包括有趣的演示！）。 1. 默认 fetch() 超时 默认情况.
node-fetch-retry:使用节点获取执行重试的节点模块
05-12
节点获取重试 节点模块，用于对HTTP请求执行重试。 它是库的包装。 它具有如下所述的内置默认重试逻辑以及可配置的参数。 它还具有对Apache OpenWhisk操作的内置支持，可以调整超时以反映操作超时。 安装 npm install @adobe/node-fetch-retry 用法 该库的功能与普通的相同，但具有一些附加功能。 默认行为 不配置任何参数，重试行为将如下所示： 重试60秒 重试100ms的初始延迟，并具有指数补偿 仅在5xx响应上重试 套接字超时30秒 const fetch = require ( '@adobe/node-fetch-retry' ) ; async main ( ) { const response = await fetch ( url ) ; } 本示例仅使用自定义标头，并将使用默认重试设置： const fetch = r
Fetch设置超时时间
与你清欢
05-06 4598
/** * * * @param {string} url * @param {number} 超时时间 * @returns */ function request(url,wait=30) { return new Promise((resolve, reject) => { let status = 0; // 0 等待 1 完成 2 超时 let ti...
fetch添加超时时间
LRQQHM的博客
05-24 1631
转载 https://blog.csdn.net/qq_33323251/article/details/79832689 其实为fetch添加超时时间很简单,需要用到Promise.race()方法. Promise.race() 方法将多个Promise包装成一个新的Promise实例. var p = Promise.race([p1,p2,p3]); 上面的代码中,只要p1,p2,p3中有一个实例先改变状态,p的状态就跟着改变,而那个率先改变的Promise实例返回值就传递给p的回调函数. Prom
Fetch超时设置和终止请求
包磊磊的博客
04-06 1101
1.基本使用 Fetch 是一个新的端获取资源的接口，用于替换笨重繁琐XMLHttpRequest.它有了Request 和 Response 以及Headers对象的概念，与后端语言请求资源更接近。 一个简单的GET请求 fetch('https://www.baidu.com') .then(resp=>resp.text()) // 转换成文本对象 ...
让Fetch()也可以Timeout
大灰狼的小绵羊哥哥的博客
04-04 1689
以前在js中请求网络数据都是使用XMLHttpRequest实现的http://www.jianshu.com/p/8556d4394a5d Fetch的引入为JavaScript提供了一个更好的替代方法，遗憾的是，fetch没有设置timeOut的设置，这里。。。。 fetch()的详细用法不在这里多说了，不清楚的自行Google 这里记录如何设置请求超时时间 普通的post请求
fetch设置请求超时
曳猫的博客
12-03 2419
常规封装 fetch 单独设置超时 封装设置超时
封装FetchAPI，要求超时报错的同时，取消执行promise，而不是继续执行
qq_37299525的博客
06-09 545
封装api
关于Fetch的then
{竹子}
05-16 6586
fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); }); 我一直以为.then只是一个返回的结果，却不知道后面的.then是前面的then...
fetch请求超时如何添加
05-31
要在 JavaScript 中添加 Fetch 请求超时，可以使用 `AbortController` 和 `setTimeout` 函数的组合。 首先，创建一个 `AbortController` 对象，并通过它创建一个 signal。将该 signal 作为 Fetch 请求的参数传递给 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值