fetch API 简单解读
来源:互联网 发布:末日战歌全套源码 编辑:程序博客网 时间:2024/05/29 19:05
http://f2e.souche.com/blog/fetch-api-jie-du/?utm_source=tuicool&utm_medium=referral
在我们日常的前端开发中,XMLHttpRequest
是必不可少会遇到的一个东东。XHR
最初是由微软引入其 MSXML
的,Web 开发者需要通过 ActiveX 去调用,而后,Mozilla 开发者开发了一个近似的东西,为了方便在 JavaScript 中使用,才用 XMLHttpRequest
为名的对象封装了一下。使用 XHR
发起一个请求,大致代码就会如下所示:
// 首先,需要些一些特征检测来做下浏览器兼容if (window.XMLHttpRequest) { request = new XMLHttpRequest();} else if (window.ActiveXObject) { try { request = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { request = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} }}// 然后开启一个请求request.open('GET', 'https://nodejs.org/api/http.json', true); // 真正意义上的请求request.send(null); request.addEventListener('load', function() { // 处理返回结果})
以上的代码,相信每个前端开发都有写过,然而就算不写那一段长长的兼容代码,光是后面发起请求的那段代码,也会让人觉得头大。就更不用说所谓的 XMLHttpRequest
,其实现在几乎没人用 XML 做浏览器短的数据交互形式了。
尽管众多三方框架已经封装了一些好用的 api,例如 jQuery.ajax()
,angular.js 的 $http
,但是如果有个更简单的方法呢?
Syntax
fetch()
的语法很简单,如下所示:
fetch(input, init).then(function(response) { ... });
其中:
input
参数,即可以直接传入一个 url,也可以传入一个 Request
对象;
init
参数是可选,是一个包含了请求方法,请求头部,请求主体,模式,凭证,缓存模式等配置的对象。
从语法中可以看到,fetch()
API 会返回一个 Promise。
因此,开头所提到的例子,可以修改成这样:
fetch('https://nodejs.org/api/http.json').then(function(response) { return // 响应处理}).catch(function(err) { // 捕获错误});
除了普通的 get 请求,发起一个表单 POST 请求也是相当简单:
fetch('/post/some/data', { method: 'post', body: new FormData(document.querySelector('#form'))});
同理,如果是 json 格式的数据的话:
fetch('/post/some/data', { method: 'post', body: JSON.stringify({ user: 'lisposter', pwd: 'souche.com'})});
响应处理
与上述 Request
对应的,Fetch API 还对应有一个 Response
用于表示响应结果,Response
,是一个 Stream 对象,其提供了众多便利的属性及方法以供开发者处理。方法一般会返回一个 Promise,举个例子,处理 json 数据。简单示例:
fetch('https://nodejs.org/api/http.json') .then(function(response) { return response.json(); }) .then(function(json) { // 此处的 json 已经被处理为 json 对象 }) .catch(function(err) { // 捕获错误 });
这里,你当然也可以选择使用传统的 JSON.parse()
,但无疑,使用 .json()
方法更加方便快捷,适合在 Promise 中使用。
同理,如果你希望处理请求结果为纯文本,那么 Response.text()
将会很有帮助。除此之外,还有 .blob()
, formData()
等方法可供使用。Fetch API 所支持的响应类型有如下几种:
- ArrayBuffer
- ArrayBufferView(Uint8Array and friends)
- Blob/File
- String
- URLSearchParams
- FormData
从 Response 的属性中,我们也能轻易提取到响应头部及 Metadata 的相关信息:
fetch('https://nodejs.org/api/http.json').then(function(response) { console.log(response.status); console.log(response.statusText); console.log(response.url); console.log(response.type); console.log(response.headers);// 获取头部信息需要使用 .get() console.log(response.headers.get('Content-Type')); })
其中,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 提供的兼容情况列表。你也可以使用 GitHub 提供的 polyfill,他可以兼容到最低 IE9,相信可以满足大多数的情况了。
在未来,Cache API 的实现完成后,Fetch API 将能很好地处理离线状态下的请求,这应该是大家最期待的特性了。
- fetch API 简单解读
- fetch API简单使用方法
- Fetch API
- fetch API
- Fetch API
- fetch api
- [译] JavaScript Fetch API
- 深入浅出Fetch API
- fetch api 浅谈
- fetch API 简介
- fetch 基本Api
- 异步API Fetch
- Fetch-新一代Ajax API
- fetch简介: 新一代Ajax API
- Ajax新玩法fetch API
- fetch系列 -- Javascript window.fetch API 及 fetch polyfill技术和API
- React native redux api login token fetch
- Promise , fetch Api ,blueBird,Q,When
- Android Dev Intro - An Example about Handler
- 关于 使用百度地图SDK 打包签名后出现的 app-key错误的解决
- ViewPager设置wrap_content无效
- CentOS yum 源的配置与使用
- 总结几个不错的编程观点和习惯
- fetch API 简单解读
- Android 上传文件,图片。以及服务器端接收相关。
- Silverlight利用故事板设计闪烁的动画
- Android网络通信之HttpURLConnection
- 第十周-圆柱类族的设计项目
- [LeetCode28]
- java集合------TreeMap
- 基于Hexo+GitHub Pages 搭建博客详细教程
- 经典排序算法: