了解 Fetch API与Fetch+Async/await
背景
提及前端与服务器端的异步通信,离不开 Ajax (Asynchronous JavaScript and XML)。实际上我们常说的 Ajax 并非指某一项具体的技术,它主要是基于用脚本操作 HTTP 请求的 Web 应用架构。最早出现在 Jesse James Carrett 于 2005年2月发表一篇《Ajax:A New Approach to Web Applications》中提出的一个新概念。
在 Ajax 中涉及到的 JavaScript 方面的技术,即 XMLHttpRequest(以下简称 XHR)。很长一段时间我们都是通过 XHR 来与服务器建立异步通信。然而在使用的过程中,我们发现 XHR 是基于事件的异步模型,在设计上将输入、输出和事件监听混杂在一个对象里,且必须通过实例化方式来发请求。配置和调用方式混乱,不符合关注分点离原则。
关注点分离原则所描述的是系统的元素应该表现出互不相干的目的。也就是说,没有会分担另外一个元素职责的,或者其它不相干职责的元素。
正是由于 XHR 在使用上的不便,许多前端库就将进行封装,方便开发者调用。其中影响和使用范围最广的当属 jQuery 提供的 $.ajax
方法。该方法最为先进之处在于,从 jQuery 1.5 开始,$.ajax()
返回的jqXHR对象 实现了 Promise 接口, 使它拥有了 Promise 的所有属性,方法和行为。
直到 Fetch API 的提出,前端和服务器端的异步通信方面更进了一步。
技术介绍
Fetch API 是近年来被提及将要取代 XHR
的技术新标准,是一个 HTML5 的 API。
Fetch 并不是 XHR
的升级版本,而是从一个全新的角度来思考的一种设计。Fetch 是基于 Promise 语法结构,而且它的设计足够低阶,这表示它可以在实际需求中进行更多的弹性设计。对于 XHR 所提供的能力来说,Fetch 已经足够取代 XHR
,并且提供了更多拓展的可能性。
快速了解
Fetch API 规范明确了用户代理获取资源的语义。原生支持 Promise
1,调用方便,符合语义化。可配合使用 ES2016 中的 async
/ await
语法,更加优雅。
通过一个例子来快速了解和使用 Fetch API 最基本的用法
1 |
// 获取 some.json 资源 |
通过例子我们可以发现,使用 Fetch API 能够快速便捷地进行资源地获取。
可以简单理解为,Fetch API 是面向未来的异步通信 API。
具体用法
fetch 方法
fetch 方法有两种调用方式。
1 |
Promise fetch(String url, [, Object options]) |
- 第一个参数是一个
Request
对象,第二个参数是配置信息,可选 - 第一个参数是一个
url
,第二个参数是配置信息,可选
可选配置信息是一个 Object 对象,可以包含以下字段:
- method: 请求的方法,例如:
GET
,POST
。 - headers: 请求头部信息,可以是一个简单的对象,也可以是 Headers 类实例化的一个对象。
- body: 需要发送的信息内容,可以是
Blob
,BufferSource
,FormData
,URLSearchParams
或者USVString
。注意,GET
,HEAD
方法不能包含body。 - mode: 请求模式,分别有
cors
,no-cors
,same-origin
,navigate
这几个可选值。- cors: 允许跨域,要求响应中
Acess-Control-Allow-Origin
这样的头部表示允许跨域。 - no-cors: 只允许使用
HEAD
,GET
,POST
方法。 - same-origin: 只允许同源请求,否则直接报错。
- navigate: 支持页面导航。
- cors: 允许跨域,要求响应中
- credentials: 表示是否发送
cookie
,有三个选项- omit: 不发送
cookie
。 - same-origin: 仅在同源时发送
cookie
。 - include: 发送
cookie
。
- omit: 不发送
- cache: 表示处理缓存的策略。
- redirect: 表示发生重定向时,有三个选项
- follow: 跟随。
- error: 发生错误。
- manual: 需要用户手动跟随。
- integrity: 包含一个用于验证资资源完整性的字符串。
Headers
Headers
可用来表示 HTTP 的头部信息,使用 Headers
的接口,你可以通过 Headers() 构造函数来创建一个你自己的 headers
对象。
1 |
var headers = new Headers({ |
Headers
提供 append
, delete
, get
, getAll
, has
, set
, forEach
等这些实例方法,可供开发者更加灵活地配置请求中的 headers。
Request
Request
类用于描述请求内容。构造函数接受的参数与fetch方法一致,这里就不展开介绍了。我们可以这么理解,事实上fetch方法在调用时,会将传入的参数构造出一个 Request 对象并执行。
1 |
var URL = '//api.some.com'; |
Request 接口中的配置项 headers 可以是实例化的 Headers 。
1 |
var URL = '//api.some.com'; |
更便捷的是,Request 对象可以从已有的 Request 对象中继承,并拓展新的配置。
1 |
var URL = '//api.some.com'; |
Response
Response 实例是在fentch()处理完promises之后返回的。它的实例也可用通过JavaScript来创建,但只有在ServiceWorkers中才真正有用。
1 |
var res = new Response(body, init); |
其中 body
可以是 Bolb
, BufferSource
, FormData
, URLSearchParams
, USVString
这些类型的值。
init 是一个对象,可以包括以下这些字段
- status: 响应状态码
- statusText: 状态信息
- headers: 头部信息,可以是对象或者
Headers
实例
Response
实例提供了以下实例属性,均是只读属性。
- bodyUsed: 用于表示响应内容是否被使用过
- headers: 头部信息
- ok: 表明请求是否成功,响应状态为 200 ~ 299 时,值为 true
- status: 状态码
- statusText: 状态信息
- type: 响应类型
- basic: 同源
- cors: 跨域
- error: 出错
- opaque: Request mode 设置为 “no-cors”的响应
- url: 响应地址
Response
实例提供以下实例方法。
- clone: 复制一个响应对象。
- arrayBuffer: 将响应数据转换为 arrayBuffer 后 reslove 。
- bolb: 把响应数据转换为 Bolb 后 reslove 。
- formData: 把响应数据转换为 formData 后 reslove 。
- json: 把响应内容解析为对象后 reslove 。
- text: 把响应数据当做字符串后 reslove 。
浏览器支持
Chrome 45+, Opera 44+,Firefox 51+ 和 IE Edge 等这些版本的浏览器开始支持 Fetch API。移动端浏览器也在逐步得到支持。
我们可以通过对 window.fetch
的能力检测,判断出浏览器是否支持 Fetch API。github 官方推出了一个 Fetch API 的 polyfill 库,可以让更多浏览器提前感受到 Fetch API 的便捷的开发体验。
结语
虽然 Fecth API 使用方便符合语义化,但是现阶段它也有所限制。Fetch API 是基于 Promise,由于 Promise 没有处理 timeout 的机制,所以无法通过原生方式处理请求超时后的中断,和读取进度的能力。但是相信未来为了支持流,Fetch API 最终将会提供可以中断执行读取资源的能力,并且提供可以读取进度的 API。
参考文档
.
了解 Fetch API与Fetch+Async/await的更多相关文章
- 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用
github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...
- Ajax新玩法fetch API
目前 Web 异步应用都是基于 XMLHttpRequest/ActiveXObject (IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性 ...
- ES6 Fetch API HTTP请求实用指南
本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程 ...
- Fetch API与POST请求那些事
简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...
- Fetch API & Async Await
Fetch API & Async Await const fetchJSON = (url = ``) => { return fetch(url, { method: "G ...
- fetch + async await 使用原生JS发送网络请求
由于现在主流浏览器支持Fetch API,无需引用其他库就能实现AJAX,一行代码就搞定,可以说是非常方便了. export default { name: 'HelloWorld', data() ...
- Fetch API 接口参考
前言 Fetch API是新的ajax解决方案,用于解决古老的XHR对象不能实现的问题,Fetch API 提供了一个获取资源的接口(包括跨域请求),任何使用过 XMLHttpRequest 的人都能 ...
- Fetch API 了解 及对比ajax、axois
Fetch是什么 Fetch 是一个现代的概念, 等同于 XMLHttpRequest.它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性.Fetch被很多浏览器所支 ...
- Fetch API & cancel duplicate API & cache API
Fetch API & cancel duplicate API & cache API const usersCache = new Map<string, User>( ...
随机推荐
- toString()和toLocaleString()方法有什么区别和联系
toString()和toLocaleString()有什么区别 偶然之间用到这两个方法 然后在数字转换成字符串的时候,并没有感觉这两个方法有什么区别,如下: 1 2 3 4 5 6 7 8 var ...
- 论STA | 工艺、工具、分析的本与末
人类从漫长的蒙昧中觉醒之后,不再依靠着奇装异服的巫师通灵来指导生活,巫师进化成了科学家,他们试图对周遭的一切进行概括.分类.抽象,于是有了化学.物理.数学等基科.比如一粒沙,它的化学组成是什么,物理特 ...
- 01hive基础操作
一. Hive基础概念 我自己本人一开始学习Hive的时候,最大的疑问就是hive和hbase到底有什么区别?(因为自己本身学校课程设置问题有了解到一丢丢hbase的知识) 所以先甩一篇博客提供给跟我 ...
- 最新版的 vscode 怎么配置 Python?
请进 -- > https://www.zhihu.com/question/322530705/answer/860418884
- Linux下查看当前文件大小的命令
1.ls -lht 列出每个文件的大小和当前目录所有文件大小总和 2.du -sh * 列出当前文件夹下的所有子文件的大小 看你需要啥样的,自己来吧
- 80端口被system占用
# 开始 今天配置wampserver 3.0.6的时候 发现右下角的图标一直是红色的 经验告诉我两个服务都没有运行 # 解决思路 wampserver有两个服务 一个是 Apache 服务 一个是 ...
- Android学习04
Toast Toast是Android系统提供的一种非常好的提示方式,在程序中可以使用它将一些短小的信息通知给用户,这些信息会在一段时间后自动消失,并且不会占用任何的屏幕空间. 1.默认Toast 在 ...
- Windows下运行MapReduce程序出现Could not locate executable null\winutils.exe in the Hadoop binaries.
运行环境:windows10 64位,虚拟机:Ubuntu Kylin 14.04,Hadoop2.7.1 错误信息: java.io.IOException: Could not locate ex ...
- rapidxml编写xml文件(er)
一.以rapidxml::node_declaration形式写xml文件第一行 int write(void) { ; rapidxml::xml_document<> doc; rap ...
- Java的反射机制之反向抽烟
show me the code and take to me,做的出来更要说的明白 GitHub项目JavaHouse同步收录 喜欢就点个赞呗! 你的支持是我分享的动力! 引入 反射是一种不按套路处 ...