Fetch超时设置与终止请求详解

2024-11-29 21:47:31

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.easy-mock.com/mock/5ca59ba44ba86c23d507bd40/example/getUser',{method:"post"})
  .then(resp=>resp.json()) //转换成Json对象
  .then(resp=>console.log(resp)) //输出Json内容
  .catch(error => console.error(error));

更多Fetch相关详细，可查看MDN文档 developer.mozilla.org/en-US/docs/…

2.超时设置

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

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

Promise.race([promise1,promise2]) 传入多个Promise对象，等待最快对象完成
Promise.all([promise1,promise2]) 传入多个Promise 对象，等待所有对象完成

有了以上知识后,结合函数setTimeout就可以实现超时设置

//ahutor:herbert qq:464884492
let timeoutPromise = (timeout) => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve("我是 timeoutPromise，已经完成了");
  }, timeout);
 });
}
let requestPromise = (url) => {
 return fetch(url);
};
Promise.race([timeoutPromise(1000), requestPromise("https://www.baidu.com")])
 .then(resp => {
  console.log(resp);
 })
 .catch(error => {
  console.log(error);
 });

3.取消请求

将上边的代码拷贝的浏览器控制台并将network设置为Slow3G。运行就会发现，虽然我们在控制台看到了超时信息，但切换到netwok页签中发现请求依然正常进行中，并返回了正确的内容。这并不是我想要的结果，我希望超时时间到了，请求也应该终止。

fetch请求成功后，默认返回一个Response对象，那么我们如何在代码中构造一个这样的对象呢?

 timeoutResp=new Response("timeout", { status: 504, statusText: "timeout " })
 successResp=new Response("ok", { status: 200, statusText: "ok " })

AbortController 用于手动终止一个或多个DOM请求，通过该对象的AbortSignal注入的Fetch的请求中。所以需要完美实现timeout功能加上这个就对了

//ahutor:herbert qq:464884492
let controller = new AbortController();
let signal = controller.signal;

let timeoutPromise = (timeout) => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve(new Response("timeout", { status: 504, statusText: "timeout " }));
   controller.abort();
  }, timeout);
 });
}
let requestPromise = (url) => {
 return fetch(url, {
  signal: signal
 });
};
Promise.race([timeoutPromise(1000), requestPromise("https://www.baidu.com")])
 .then(resp => {
  console.log(resp);
 })
 .catch(error => {
  console.log(error);
 });

4.总结

第一次在项目中使用fetch，在面向API编程的过程中，发现fetch没有超时的设置。第一时间查看了MDN文档以及向搜索引擎找寻实现功能的灵感(copy+c)。有些朋友在settimeout中通过 reject(new Error('网络超时'))实现。其实这样只是让前端感知当前请求超时了，并没有真正终止本次请求。所以必须借助AbortSignal信号对象。此功能目前还处于试验阶段，使用需谨慎。

demo地址 https://github.com/464884492/blog/blob/master/demo/fetch/fetchdemo.js

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

详解ES6 Fetch API HTTP请求实用指南

本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程序中的一种常见模式是从服务器请求或显示某种数据(例如用户,帖子,评论,订阅,付款等),然后使用CRUD(创建-Create,阅读-Retrieve,更新-Update或删除-Delete)操作. 为了进一步操作资源,我们经常使用这些JS方法(推荐),例如 .map(), .filter()和
fetch 使用及如何接收JS传值

使用fetch基本方式: fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json'}, body: JSON.stringify({ username: 'username', password: 'password'}) }).then(function(res){ console.l
JavaScript fetch接口案例解析

在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的 Ionic 和 React Native,都可以使用 fetch 进行完美的网络请求. 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(
ES6的Fetch异步请求的实现方法

在前端的快速发展中,为了契合更好的设计模式,产生了Fetch框架,Fetch返回的信息比XMLHttpRequest更丰富.但它目前还不是一个标准,它支持大部分常用的http 请求和响应的标准. 一. 一个完整的post请求和响应的过程 var url = "/fetch"; fetch(url,{ method:"post", headers:{ "Content-type":"application/x-www-form-urlen
浅谈Fetch 数据交互方式

获取资源很简单,发起一个请求出去,一个响应进来,然后该怎么操作就怎么操作. fetch 的 api 使用的是 promise 规范,不会 promise(用于延迟(deferred) 计算和异步(asynchronous ) 计算. 一个 Promise 对象代表着一个还未完成,但预期将来会完成的操作.主要使用它处理回调黑洞.) 的请花几分钟学习一下. 使用 fetch 去获取数据的方式: fetch("服务器地址") .then(function(response) { //将获取到
vue项目中使用fetch的实现方法

fetch的由来和定义 fetch的由来众所周知,传统 Ajax (指 XMLHttpRequest)是最早出现的发送异步请求技术,其核心是使用XMLHttpRequest对象.但是它也存在一些令人头疼的问题:XHR 是一个设计粗糙的 API,不符合关注分离的原则:配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好.而Fetch 的出现就是为了解决 XHR 存在的问题. fetch的定义和使用 MDN
ES6 fetch函数与后台交互实现

最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询. 1.RN官方文档中,可使用XMLHttpRequest var request = new XMLHttpRequest(); request.onreadystatechange = (e) = >{ if (request.readyState !== 4) { return; } if (request.status ===
fetch 如何实现请求数据

一序言在传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好.今天我们介绍的Fetch提供了一个更好的替代方法,它不仅提供了一种简单,合乎逻辑的方式来跨网络异步获取资源,而且可以很容易地被其他技术使用,例如 Service Workers. 二与Ajax对比使用Ajax请求一个 JSON 数据一般是这样: var xhr = new XMLHttpRequest(); xhr.
Fetch超时设置与终止请求详解

1.基本使用 Fetch 是一个新的端获取资源的接口,用于替换笨重繁琐XMLHttpRequest.它有了Request 和 Response 以及Headers对象的概念,与后端语言请求资源更接近. 一个简单的GET请求 fetch('https://www.baidu.com') .then(resp=>resp.text()) // 转换成文本对象 .then(resp=>console.log(resp)) // 输出请求内容 .catch(error => console.er
JAVAEE Filter 过滤器设置是否缓存实例详解

在网页中,每次的客户端访问服务器,有部分不用重复请求,如有些图片,视频等就没有必要每次都请求,这样会让服务器增大工作量.为了防止这样,我们采用过滤器来设置客户端是都缓存. 页面的缓存与不缓存设置及html页面中meta的作用 HTTP1.1中启用Cache-Control 来控制页面的缓存与否,这里介绍几个常用的参数: no-cache,浏览器和缓存服务器都不应该缓存页面信息: public,浏览器和缓存服务器都可以缓存页面信息: no-store,请求和响应的信息都不应该被存储在对方的磁盘系统
Javaweb应用使用限流处理大量的并发请求详解

在web应用中,同一时间有大量的客户端请求同时发送到服务器,例如抢购.秒杀等.这个时候如何避免将大量的请求同时发送到业务系统. 第一种方法:在容器中配置最大请求数,如果大于改请求数,则客户端阻塞.该方法有效的阻止了大量的请求同时访问业务系统,但对用户不友好. 第二种方法:使用过滤器,保证一定数量的请求能够正常访问系统,多余的请求先跳转到排队页面,由排队页面定时发起请求.过滤器实现如下: public class ServiceFilter implements Filter { private
git fetch与git pull的区别详解

git fetch和git pull都可以将远端仓库更新至本地那么他们之间有何区别?想要弄清楚这个问题有有几个概念不得不提. FETCH_HEAD: 是一个版本链接,记录在本地的一个文件中,指向着目前已经从远程仓库取下来的分支的末端版本. commit-id:在每次本地工作完成后,都会做一个git commit 操作来保存当前工作到本地的repo, 此时会产生一个commit-id,这是一个能唯一标识一个版本的序列号. 在使用git push后,这个序列号还会同步到远程仓库. 有了以上的概念再来
python Flask框架之HTTP请求详解

我们的浏览器访问网站时,默认为发送了一个HTTP的GET请求. 在浏览网站时,会经常填写表单,比如填写用户名密码.点击登录后,会跳转到我们的主页. 接下来,我们实现这个案例. 首先我们先写一个登录页面 <!doctype html> <html lang="en"> <head> <title>Hello from Flask</title> </head> <body> <form action
Go语言Http调用之Post请求详解

目录前言 POST 请求小结前言上篇文章 Go HTTP 调用(上) 介绍了如何进行 HTTP 调用,并通过 GET 请求的例子,讲述了 query 参数和 header 参数如何设置,以及响应体的获取方法. 本文继上文,接下来会通过 POST 请求,对其他参数的设置进行介绍. POST 请求发起 HTTP POST 请求时,携带 json 格式的 body 参数是最常见的,这是因为 json 格式的参数可读性好,对于层级结构较为复杂的数据也能应对,并且这符合 RestFul API
对Python中的条件判断、循环以及循环的终止方法详解

条件判断条件语句是用来判断给定条件是否满足,并根据判断所得结果从而决定所要执行的操作,通常的逻辑思路如下图: 单次判断形式 if <判断条件>: <执行> else: <执行> 例子 age = int(input("输入你的年龄:")) if age < 18: print("未成年") else: print("已成年") 多次判断形式 if <判断条件1>: <执行1>
Web应用中设置Context Path案例详解

URL:http://hostname.com/contextPath/servletPath/pathInfo Jetty 如果没有contextPath,则默认使用root上下文,root上下文的路径为"/". warName.war 在没有XML IoC文件的情况下: 如果WAR文件名是myapp.war,那么上下文路径是:/myapp: 如果WAR文件名是ROOT.war,那么上下文路径是:/: 如果WAR文件名是ROOT-foobar.war,那么上下文路径是/,虚拟host
Java 实现限流器处理Rest接口请求详解流程

Maven依赖 <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> <version>31.0.1-jre</version> </dependency> 代码上代码,不废话. 首先是限流器代码. package com.huyi.csdn.tools.rate; import com.google.c
Linux网络设置之基础操作命令详解

目录查看网络配置查看网络接口信息---ifconfig 查看路由表---route 查看网络连接情况---netstat 获取 socket 统计信息---ss 测试网络连接测试网络连通性------ping 测试DNS域名解析------nslookup 设置网络地址参数使用命令修改(临时配置) 修改网卡的地址.状态------ifconfig 添加.删除静态路由记录---route 修改配置文件(固定设置) 网络接口配置文件路由配置文件域名解析配置文件本地主机映射文件 host

Fetch超时设置与终止请求详解

相关推荐

随机推荐