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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。