Fetch API

Fetch API是一种新规范，用来取代XMLHttpRequest对象。Fetch API提供了一个fetch()方法，它被定义在BOM的window对象中，你可以用它来发起对远程资源的请求。它主要有两个特点：

接口合理化，Ajax是将所有不同性质的接口都放在XHR对象上，而Fetch是将它们分散在几个不同的对象上； Fetch操作返回Promise对象，避免了嵌套的回调函数。

IE不支持，用polyfill解决，基本原理是探测是否存在window.fetch方法，如果没有则用XHR实现。引入es6-promise.js

一、初识Fetch API
1、检查浏览器是否部署了Fetch API

if ("fetch" in window){console.log('支持'); } else {console.log('不支持'); }

2、看个例子

fetch(url).then(function (response) {return response.json(); }).then(function (jsonData) {console.log(jsonData); }).catch(function () {console.log('出错了'); });

二、Headers对象
用来构造/读取HTTP数据包的头信息。

var headers = new Headers(); headers.append("Accept", "application/json"); headers.append("Content-Type", "text/plain"); headers.append("Content-Length", content.length.toString()); headers.append("X-Custom-Header", "ProcessThisImmediately");

或者

var headers = new Headers({"Content-Type": "text/plain","Content-Length": content.length.toString(),"X-Custom-Header": "ProcessThisImmediately", }); //对象方法 headers.has("Content-Type") // true headers.has("Set-Cookie") // false headers.set("Content-Type", "text/html") headers.append("X-Custom-Header", "AnotherValue")headers.get("Content-Length") // 11 headers.getAll("X-Custom-Header") // ["ProcessThisImmediately", "AnotherValue"] headers.delete("X-Custom-Header") headers.getAll("X-Custom-Header") // []

三、Request对象
用来构造HTTP请求。

var uploadReq = new Request("/uploadImage", {method: "POST",headers: {"Content-Type": "image/png",},body: "image data" });

Request对象实例有两个属性是只读的，不能手动设置。
referrer属性，表示请求的来源，由浏览器设置，有可能是空字符串。
context属性，表示请求发出的上下文，如果是image，表示是从img标签发出，如果是worker，表示是从worker脚本发出，如果是fetch，表示是从fetch函数发出的。

Request对象实例的mode属性，用来设置是否跨域，合法的值有以下3种：same-origin、no-cors（默认值）、cors。当设置为same-origin时，只能向同域的URL发出请求，否则会报错。

四、Response对象
1、属性

status：整数值，表示状态码（比如200）；
statusText：字符串，表示状态信息，默认是“OK”；
ok：布尔值，表示状态码是否在200-299的范围内；
headers：Headers对象，表示HTTP回应的头信息；
url：字符串，表示HTTP请求的网址；
type：字符串，合法的值有5个basic、cors、default、error、opaque。

basic表示正常的同域请求； cors表示CORS机制的跨域请求； error表示网络出错，无法取得信息，status属性为0，headers属性为空，并且导致fetch函数返回Promise对象被拒绝； opaque表示非CORS机制的跨域请求，受到严格限制。

2、方法
Response.error()返回一个type属性为error的Response对象实例。
Response.redirect(url, status)返回的Response对象实例会重定向到另一个URL。

五、Body属性
Request对象和Response对象都有body属性，表示请求的内容。body属性可能是以下的数据类型：

ArrayBuffer ArrayBufferView (Uint8Array等) Blob/File string URLSearchParams FormData

Request对象和Response对象都提供以下方法，用来读取body。

arrayBuffer() blob() json() text() formData()

注意，上面这些方法都只能使用一次，第二次使用就会报错，也就是说，body属性只能读取一次。Request对象和Response对象都有bodyUsed属性，返回一个布尔值，表示body是否被读取过。
这是因为body属性是一个stream对象，数据只能单向传送一次。这样的设计是为了允许JavaScript处理视频、音频这样的大型文件。
六、数据流读取器

.text()：返回字符串 .json()：返回一个JSON对象 .formData()：返回一个FormData对象 .blob()：返回一个blob对象 .arrayBuffer()：返回一个二进制数组 数据流只能读取一次，一旦读取，数据流就空了，再次读取就不会得到结果。解决方法是在读取之前，先使用.clone()方法，复制一份一模一样的副本。

七、fetch()
fetch()第1个参数可以是url字符串，也可以是Request对象实例。第2个参数可以传一个对象，里面指定一些配置项。fetch()返回一个Promise对象，并将response对象传给回调函数。

目前，还有一些XMLHttpRequest对象可以做到，但是Fetch API还没做到的地方，比如中途中断HTTP请求，以及获取HTTP请求的进度，这些不足与Fetch返回的是Promise对象有关。

转载于:https://www.cnblogs.com/camille666/p/js_fetch_api.html

总结

以上是生活随笔为你收集整理的Fetch API的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。