Fetch API 初步解读

2024-06-07 19:27:22

文 | 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 微信公众号，我们将定期分享高质量的技术干货内容

Fetch API 初步解读相关推荐

34.Oracle深度学习笔记——12C的AWR初步解读
34.Oracle深度学习笔记--12C的AWR初步解读关于AWR,蛤蟆也经常看.因为经常看别人给出的建议,很难有深刻体会.对此,计划花费几个晚上时间好好体会一把并记录下来.此处以单实例为例.列出目 ...
聚类算法api初步使用
聚类算法api初步使用 1 api介绍 sklearn.cluster.KMeans(n_clusters=8) 参数: n_clusters:开始的聚类中心数量整型,缺省值=8,生成的聚类数,即产 ...
线性回归api初步使用
线性回归api初步使用 1 线性回归API sklearn.linear_model.LinearRegression() LinearRegression.coef_:回归系数 2 举例 2.1 步 ...
k近邻算法api初步使用
k近邻算法api初步使用机器学习流程复习: 1.获取数据集 2.数据基本处理 3.特征工程 4.机器学习 5.模型评估 1 Scikit-learn工具介绍 Python语言的机器学习工具 Scik ...
初步解读Golang中的接口相关编写方法
初步解读Golang中的接口相关编写方法概述如果说goroutine和channel是Go并发的两大基石,那么接口是Go语言编程中数据类型的关键.在Go语言的实际编程中,几乎所有的数据结构都围绕接口 ...
Fetch API HTTP请求实用指南
本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程 ...
mysql connector api_mysql connector c++ 1.1 API初步体验
mysql connector c++ 1.1 API初步体验 1,常用的头文件 #include #include #include #include #include #include 2,创建连 ...
Fetch API——简化你的AJAX
之前搞定了Promise,接下来学习Fetch API.封装过AJAX函数的各位肯定能知道XMLHttpRequest的问题(没有封装过的点这里),首先,其所有的功能全部集中在同一对象上,容易书写混乱 ...
什么是 Web API 中的 background fetch API
在为 Web 编写代码时,有大量可用的 Web API.这个网站列出了您在开发 Web 应用程序或站点时可以使用的所有 API 和接口(对象类型). Web API 通常与 JavaScript 一起 ...

最新文章

热门文章