Fetch API 初步解读

news/2024/5/22 16:44:15

文 | Leigh,UPYUN 已获得授权
微信文章链接:http://t.cn/R4afStO

在我们日常的前端开发中,XMLHttpRequest 是必不可少会遇到的一个东东。XHR 最初是由微软引入其 MSXML 的,Web 开发者需要通过 ActiveX 去调用,而后,Mozilla 开发者开发了一个近似的东西,为了方便在 JavaScript 中使用,才用 XMLHttpRequest 为名的对象封装了一下。使用 XHR 发起一个请求,大致代码就会如下所示:

以上的代码,相信每个前端开发都有写过,然而就算不写那一段长长的兼容代码,光是后面发起请求的那段代码,也会让人觉得头大。就更不用说所谓的 XMLHttpRequest,其实现在几乎没人用 XML 做浏览器短的数据交互形式了。

尽管众多三方框架已经封装了一些好用的 api,例如 jQuery.ajax(),angular.js 的 $http,但是如果有个更简单的方法呢?

Syntax

fetch() 的语法很简单,如下所示:

其中:

input 参数,即可以直接传入一个 url,也可以传入一个 Request 对象;

init 参数是可选,是一个包含了请求方法,请求头部,请求主体,模式,凭证,缓存模式等配置的对象。

从语法中可以看到,fetch() API 会返回一个 Promise。

因此,开头所提到的例子,可以修改成这样:

除了普通的 get 请求,发起一个表单 POST 请求也是相当简单:

同理,如果是 json 格式的数据的话:

响应处理

与上述 Request 对应的,Fetch API 还对应有一个 Response 用于表示响应结果,Response,是一个 Stream 对象,其提供了众多便利的属性及方法以供开发者处理。方法一般会返回一个 Promise,举个例子,处理 json 数据。简单示例:

这里,你当然也可以选择使用传统的 JSON.parse(),但无疑,使用 .json() 方法更加方便快捷,适合在 Promise 中使用。

同理,如果你希望处理请求结果为纯文本,那么 Response.text() 将会很有帮助。除此之外,还有 .blob(), formData() 等方法可供使用。Fetch API 所支持的响应类型有如下几种:

  • ArrayBuffer

  • ArrayBufferView(Uint8Array and friends)

  • Blob/File

  • String

  • URLSearchParams

  • FormData

从 Response 的属性中,我们也能轻易提取到响应头部及 Metadata 的相关信息:

其中,response.headers 就是一个 Header 类型的对象,我们可以使用 Headers 类提供的各种方法来操作,除了上面代码中的 .get() 方法外,Headers 还有 .has() 方法,用于检查是否包含某个头部信息;.getAll() 方法,将制定的头部信息以数组形式全部返回,等等,具体可以参考 Headers 类型文档

响应类型

每当我们用 fetch 发起一个请求,其响应都会被赋予一个响应类型,'basic','cors' 或者 'opaque'。

如果请求是同源的,那么响应类型就是 'basic',如果跨域的请求,则是 'cors',如果对非同源的资源发起一个请求,并且其没有返回 CORS 头的话,则是 'opaque' 类型。'opaque' 类型的响应我们将不能读取所返回的数据或者查看请求的状态,也就是说,我们压根没办法知道请求是否成功了。

我们可以在发起请求的时候,指定一个模式来确保只有相应的请求会被允许:

  • same-origin: 只有同源的请求才会被允许。

  • cors: 允许同源或者非同源但是返回正确 CORS 头部的请求。

  • cors-with-forced-preflight: 在正式请求之前,总是先发起一个 preflight 检查。

  • no-cors: 用以发起非同源又没有返回 CORS 头的请求。

注意:因为 Cache API 还没有在 window 对象中实现,因此,目前 fetch api 并没有支持从 window 域中发起 no-cors 请求,但是你可以在 Service Worker 中使用。

投入使用

Fetch API 并没有完全完成,因此,浏览器对其支持也不完全,在实际使用的时候还需要注意兼容问题,可以通过特性检查,检查 Headers, Request, Response 或者 fetch 是否存在来判断浏览器的支持情况。也可以参考 Can I Use (http://caniuse.com/#feat=fetch)提供的兼容情况列表。你也可以使用 GitHub (https://github.com/github/fetch)提供的 polyfill,他可以兼容到最低 IE9,相信可以满足大多数的情况了。

在未来,Cache API 的实现完成后,Fetch API 将能很好地处理离线状态下的请求,这应该是大家最期待的特性了。

—— The End ——

本文为 UPYUN 独家刊载,作者:Leigh。转载须注明作者和来源,并保留原文链接。有疑问请联系 UPYUN 公众号(upaiyun)
原文地址:
http://zhuli.me/fetch-api-intro/

欢迎关注 UPYUN 微信公众号,我们将定期分享高质量的技术干货内容


http://lihuaxi.xjx100.cn/news/245488.html

相关文章

Linux开机启动过程分析

为什么80%的码农都做不了架构师?>>> 开机过程指的是从打开计算机电源直到LINUX显示用户登录画面的全过程。分析LINUX开机过程也是深入了解LINUX核心工作原理的一个很好的途径。 启动第一步--加载BIOS 当 你打开计算机电源&…

linux c一站式编程 pdf,《Linux·C编程一站式学习》·(宋劲杉)·文字版.pdf

Linux C 编程一站式学习宋劲杉北京亚嵌教育研究中心版权 © 2008, 2009 宋劲杉, 北京亚嵌教育研究中心Permission is granted to copy, distribute and/or modify this document underthe terms of the GNU Free Documentation License, Version 1.3 or any laterversion p…

Alpha冲刺——day1

Alpha冲刺——day1 作业链接 Alpha冲刺随笔集 github地址 站立式会议 会议安排:alpha冲刺的第一天,我们站立式会议讨论了我们接下来的安排,做出大致的规划,并针对之前的原型设计,讨论了界面设计的大概 项目进展项目进展…

Percona XtraBackup备份到恢复记录

全备:innobackupex --userbkpuser --passwordbkppassword /app/soft/backup/20160107 --no-timestamp --defaults-file/app/data/mysql/3336/etc/my.cnf增量备份1,以上次备份为基准,上次备份是全备:innobackupex --incremental /a…

Ubuntu阿里云搭建Mono.net环境

查看磁盘信息 我们买的系统默认情况下只是安装了系统,而数据盘需要自己挂载,例如我这里的系统占用20多G,还有40多G的数据盘默认是没有挂载的,首先我们运行df -h查看: rootAY1212241134392134698:~# df -hFilesystem Si…

c语言中程序偏离,C语言中的指针加减偏移量

首先看一段程序:#include int main(){int a[5] {1, 2, 3, 4, 5};int* p (int*)(&a 1);printf("%d, %d /n", *(a 1), *(p - 1));return 0;}输出结果为:2, 5第一个结果好说,a1后指针指向了数组中的‘2’。 而第二…

node.js学习笔记之promise

这篇文章说说我对promise的理解。promise在ES6之前就有的写法,在ES6中写入了语言标准,于是就有了原生promise对象。promise对象能更好的改善异步操作的回调地狱,把多层嵌套扁平化,看上去像同步执行的代码,更容易阅读和…

ubuntu操作系统下载

原文网址:http://www.cyberciti.biz/linux-news/download-ubuntu-14-4-cd-dvd-iso-images/ Download of the day: Ubuntu Linux 14.04 LTS CD / DVD ISO by NIXCRAFT on APRIL 17, 2014 5 COMMENTS LAST UPDATED APRIL 17, 2014 in LINUX NEWS, OPEN SOURCE Ubuntu…