原文链接:https://www.cnblogs.com/yfrs/p/fetch.html

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文档,有以下两个方法

  1. Promise.race([promise1,promise2]) 传入多个Promise对象,等待最快对象完成
  2. 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信号对象。此功能目前还处于试验阶段,使用需谨慎。

有喜欢聊技术朋友也欢迎入群,若二维码失效可加我微信回复**前端**

![](https://img2018.cnblogs.com/blog/392126/201911/392126-20191106142116047-1612045736.png)

作者:杨瀚博
QQ:46488449

【转】Fetch超时设置和终止请求的更多相关文章

  1. Fetch超时设置和终止请求

    1.基本使用 Fetch 是一个新的端获取资源的接口,用于替换笨重繁琐XMLHttpRequest.它有了Request 和 Response 以及Headers对象的概念,与后端语言请求资源更接近. ...

  2. jquery-ajax请求:超时设置,增加 loading 提升体验

    前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的 ...

  3. nginx中的超时设置,请求超时、响应等待超时等

    nginx比较强大,可以针对单个域名请求做出单个连接超时的配置. 比如些动态解释和静态解释可以根据业务的需求配置 proxy_connect_timeout :后端服务器连接的超时时间_发起握手等候响 ...

  4. 第三百二十七节,web爬虫讲解2—urllib库爬虫—基础使用—超时设置—自动模拟http请求

    第三百二十七节,web爬虫讲解2—urllib库爬虫 利用python系统自带的urllib库写简单爬虫 urlopen()获取一个URL的html源码read()读出html源码内容decode(& ...

  5. 六 web爬虫讲解2—urllib库爬虫—基础使用—超时设置—自动模拟http请求

    利用python系统自带的urllib库写简单爬虫 urlopen()获取一个URL的html源码read()读出html源码内容decode("utf-8")将字节转化成字符串 ...

  6. [转]axios请求超时,设置重新请求的完美解决方法

    自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历. 具体原因 最近公司在做一个项目, ...

  7. vue axios请求超时,设置重新请求的完美解决方法

    //在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.intercep ...

  8. HttpClient超时设置setConnectionTimeout和setSoTimeout

    http是基于TCP/IP进行通信的,tcp通过3次握手建立连接,并最终以4次挥手终止通信. 知乎上对三次握手和四次挥手有如下解释: 作者:知乎用户链接:https://www.zhihu.com/q ...

  9. $.ajax()——超时设置,增加 loading 提升体验

    前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的 ...

随机推荐

  1. (翻译) closures-are-not-complicated

    总计:读完这篇文章需要20分钟   这篇文章讲解了闭包的一些内容,作者是拿ES5规范中的一些名词来讲的. 所以可能和博客上一篇文章中提到的binding object, (lexical enviro ...

  2. javascript两个数组内容合并

    需求: ,,]; ,,]; 最终结果: [,,,,,] 代码: Array.prototype.addAll= function(arr) { this.push.apply(this, arr); ...

  3. 反向代理远端 单台tomcat 使用域名代理

    .环境 nginx 10.1.1.161 公网:123.58.251.166 tomcat 10.1.1.103 .远端tomcat 配置 [root@host---- ~]# netstat -tn ...

  4. RabbitMQ简单实现,exchange四种模式,持久化

    RabbitMQ目录 一.简介,简单实现二.Exchange四种类型简单介绍三.消息确认,交换机.队列及消息持久化一.简介及简单实现RabbitMQ是一个消息代理:它接受并转发消息.你可以把它当成一个 ...

  5. @vue/cli3中解决Elint中console.log报错的问题

    方法一:package.json中”eslintConfig”>"rules”字段添加如下代码 "no-console": "off", &qu ...

  6. 【ABAP系列】SAP ABAP下载带密码的Excel文件

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP下载带密码的Ex ...

  7. systemctl daemon-reload

    systemctl daemon-reload: 重新加载某个服务的配置文件,如果新安装了一个服务,归属于 systemctl 管理,要是新服务的服务程序配置文件生效,需重新加载. init 和 sy ...

  8. How to add Facebook’s Customer Chat Plugin to your website

    How to add Facebook’s Customer Chat Plugin to your website By Gerardo Salandra  Do you need a live c ...

  9. windows下exfat无法写入怎么修复?

    为了能够实现mac与windows文件共享,把移动硬盘格式化为exfat了,可是在osx中放入文件后,在windows上紧进行读取写入时出现错误,提示使用chkdsk进行修正,下面是修正步骤. 方法/ ...

  10. 教你用免费的hihttps开源WEB应用防火墙阻止暴力破解密码

    教你用免费的hihttps开源WEB应用防火墙阻止暴力破解密码 很多企业都有自己的网站,需要用户登录后才能访问,但有大量的黑客攻击软件可以暴力破解网站密码,即使破解不了也非常恶心.有没有免费的解决办法 ...