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


Posted in Javascript onMay 18, 2019

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信号对象。此功能目前还处于试验阶段,使用需谨慎。

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

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

Javascript 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
微信小程序实现搜索历史功能
Mar 26 #Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 #Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 #Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 #Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 #Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 #Javascript
小程序云开发之用户注册登录
May 18 #Javascript
You might like
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
php类常量的使用详解
2013/06/08 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php上传文件问题汇总
2015/01/30 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
layui获取选中行数据的实例讲解
2018/08/19 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
小程序实现分类页
2019/07/12 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python实现购物车程序
2018/04/16 Python
python 不以科学计数法输出的方法
2018/07/16 Python
Sanic框架配置操作分析
2018/07/17 Python
pytorch 共享参数的示例
2019/08/17 Python
python中shell执行知识点
2020/05/06 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
德国机车企业:FC-Moto
2017/10/27 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
给儿子的表扬信
2014/01/15 职场文书
协议书的格式
2014/04/23 职场文书
初三新学期计划书
2014/05/03 职场文书
百家讲坛观后感
2015/06/12 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript