深入浅出Fetch-API【转】
原文链接 转自:http://www.brucezhou.com/2017/01/11/深入浅出Fetch-API/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const url = URL.format({
pathname: '/api/add',
});
/* URL是url模块,可以很方便的处理url,提供了两个方法: format、parse
* format: 将对象变成字符串,parse: 将字符串变成对象
* 相似的一个模块叫querystring,专门处理查询字符串,也提供了两个方法: stringify、parse
**/
const headers = new Headers({
`Content-Type`: "application/json"
});
const request = new Request(url, {
method: 'POST',
mode: 'cors',
// 该属性决定了是否可以跨域,但成功与否还要看服务器的支持
credentials: 'include',
// 该属性决定了请求是可以否带cookie
headers,
body: JSON.stringify(body),
// body不能是一个对象
});
const response = await fetch(request);
const body = await response.json();
|
Fetch引入了3个接口: Headers, Request, Response
,它们直接对应HTTP中的相应概念,下面将依次介绍。
Headers
常用方法
Headers接口是一个简单的键值对,Request接口中的headers参数就可以直接用一个对象来代替,但它和普通对象的不同在于它提供了以下一些方法,且大多方法的返回值是可以被for of
迭代的,使得操作Header更为方便 Headers接口的方法
guard属性
在Headers对象中有一个guard
属性,来指定其是否可以被改变,其有以下5种取值。
none
:默认值request
:Request.headers 对象只读request-no-cors
:在 no-cors 模式下,Request.headers 对象只读response
:Response.headers 对象只读immutable
:通常在 ServiceWorkers 中使用,所有 Header 对象都为只读
Request
其有两个参数
,第一个参数是URL(字符串)
,其他参数都通过第二个参数(对象)传递,下面将详细说明第二个参数中的相应字段。
mode
mode参数用来决定是否允许跨域请求,以及哪些response属性可读。可选的mode值为 same-origin
、no-cors
(默认)以及 cors
。
same-origin
: 请求遵守同源策略cors
: 请求遵守CORS协议,并只有有限的一些 Header 被暴露给 Response 对象,但是 body 是可读的,虽然允许跨域,但成功与否,还要看服务器支持,在服务器上可以设置Access-Control-Allow-Origin
头,允许所有的话,可以设置为*
。no-cors
: 该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源,但是首先有个前提条件,就是请求的 method 只能是HEAD、GET 或 POST,另外JS不能访问 Response 对象中的任何属性。
credentials
该属性与XHR中的withCredentials
相同,决定了是否可以跨域访问cookie,但是有三个值:omit
(默认), same-origin
, include
.
比如你要跨域访问一个服务器,并要携带cookie,那就要把这个属性设置为include
。
官方文档关于Request的介绍很详细
Response
Response 对象通常在 fetch() 的回调中获得,也可以通过 JS 构造,不过这通常只在 ServiceWorkers 中使用。
其常用属性有status
, statusText
, headers
, type
,body
,下面分别介绍。
status
, statusText
, headers
和HTTP保持一致。
type
type
属性的值可能有: basic
, cors
, default
, opaque
。
basic
:同域的响应,除 Set-Cookie 和 Set-Cookie2 之外的所有 Header 可用cors
:Response 从一个合法的跨域请求获得,某些 Header 和 body 可读error
:网络错误。Response 对象的 status 属性为 0,headers 属性为空并且不可写。当 Response 对象从 Response.error() 中得到时,就是这种类型opaque
:在no-cors
模式下请求了跨域资源。依靠服务端来做限制
body
body
的类型只能是以下几种的一个
- ArrayBuffer
- ArrayBufferView
- Blod/File
- string
- URLSearchParams
- FormData
注意并没有对象,这意味着如果要传一个对象的话,必须先把它stringify,然后把Content-Type设置为application/json
Fetch还针对以上类型提供了对应的方法,将body从Request或Response中取出来,这些方法都返回一个使用实际内容 resolve 的 Promise 对象。
- arrayBuffer()
- blod()
- json()
- text()
- formData()
body只能被读取一次
非常重要的一点是,Request 和 Response 的 body 只能被读取一次!它们有一个属性叫 bodyUsed
,读取一次之后设置为 true,之后就不能再被读取了。
这样设计的目的是为了之后兼容基于流的 API,我们的目的是当数据到达时就进行相应的处理,这样就使得 JavaScript 可以处理大文件例如视频,并且可以支持实时压缩和编辑。
那么,如何让 body 能被多次读取呢?API 为这两个对象提供了一个 clone()
方法。调用这个方法可以得到一个克隆对象,对象中包含全新的 body。不过要记得,clone() 必须要在使用 body 之前调用,也就是先 clone() 再读使用。
serviceWorker
在 Fetch 规范中对 API 进行了定义,它结合 ServiceWorkers,尝试做到如下优化:改善离线体验,保持可扩展性。
serviceWorker作为一个新的API,可以拦截HTTP请求,通过编程的方式去控制HTTP缓存,还可以做到提前加载,加快首屏渲染速度。
参考资料
fetch API 简介
官方文档
fetch polyfill
转载于:https://www.cnblogs.com/webday/p/7416665.html
深入浅出Fetch-API【转】相关推荐
- 深入浅出Fetch API
多年来,XMLHttpRequest一直是web开发者的亲密助手.无论是直接的,还是间接的, 当我们谈及Ajax技术的时候,通常意思就是基于XMLHttpRequest的Ajax,它是一种能够有效改进 ...
- Fetch API 初步解读
文 | Leigh,UPYUN 已获得授权 微信文章链接:http://t.cn/R4afStO 在我们日常的前端开发中,XMLHttpRequest 是必不可少会遇到的一个东东.XHR 最初是由微软 ...
- Fetch API HTTP请求实用指南
本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程 ...
- Fetch API——简化你的AJAX
之前搞定了Promise,接下来学习Fetch API.封装过AJAX函数的各位肯定能知道XMLHttpRequest的问题(没有封装过的点这里),首先,其所有的功能全部集中在同一对象上,容易书写混乱 ...
- 什么是 Web API 中的 background fetch API
在为 Web 编写代码时,有大量可用的 Web API.这个网站列出了您在开发 Web 应用程序或站点时可以使用的所有 API 和接口(对象类型). Web API 通常与 JavaScript 一起 ...
- ES6 Fetch API和Cookie相关的知识点
Jerry Wang曾经写过一篇比较web应用处于stateful和stateless不同状态下的行为差异,发表在SAP社区上: https://blogs.sap.com/2017/03/31/st ...
- 使用fetch封装请求_关于如何使用Fetch API执行HTTP请求的实用ES6指南
使用fetch封装请求 In this guide, I'll show you how to use the Fetch API (ES6+) to perform HTTP requests to ...
- 关于fetch api这点事
fetch fetch api 文档地址 模拟登录demo fetch api fetch api 是浏览器的异步可跨域请求.基于XMLHttpRequest, 也就是对原生Ajax请求的包装,以回调 ...
- 深入浅出 Javascript API(二)--地图显示与基本操作 转
深入浅出 Javascript API(二)--地图显示与基本操作 地图显示与基本操作(放大.缩小.移动.坐标显示)是JavascriptAPI的基本功能,也是一个WebGIS应用的基本内容,Java ...
- Javascript window.fetch API
Javascript window.fetch API 关于Ajax,一个最让人诧异的秘密就是,XMLHttpRequest的底层API其实并不是为现在普遍流行的做法设计的,它本是用来做其它事情的.虽 ...
最新文章
- mysql 分表后如何扩展_mysql扩展至分库分表
- Java - Jackson JSON Java Parser API
- 详细解读java IO
- 怎么更换默认路径_更改电脑桌面路径
- php连接数据库非明文,MySQL 数据库配置 SSL 安全连接
- ubuntu 输入空白How to cd to folder name with spaces blank names (white space)
- php事件编程,php如何实现基于事件驱动的网络编程
- List对象集合通过对象属性进行查找
- 单片机语音识别源码与资料(ASR M08-B模块arduino与51驱动)
- 与走在创业路上的学子交流——记网维“海大快点”创业团队
- android开发笔记之 国家/地区语言速查表
- python为什么被称为胶水语言_为什么只有python成了胶水语言?
- swagger设置字段required必填
- 计算机专用计算器,功率计算器
- 棠玥寕在剧组被拍,典雅古装照流出!
- 如何设置共享文件夹?
- matlab sym转str,sym struct 转换
- SPARQL入门(一)SPARQL简介与简单使用
- Laravel 完整开源项目 - 收集
- 【Android】Bug:SSL peer shut down incorrectly 的解决方法