通過來執(zhí)行求這個方式已經(jīng)存在了很長一段時

1、fetchJavaScript 通過XMLHttpRequest(XHR)來執(zhí)行異步請求，這個方式已經(jīng)存在了很長一段時間。雖說它很有用，但它不是最佳API。它在設(shè)計(jì)上不符合職責(zé)分離原則，將輸入、輸出和用事件來跟蹤的狀態(tài)混雜在一個對象里。Fetch API 提供了一個 JavaScript接口，用于訪問和操縱HTTP管道的部分，例如請求和響應(yīng)。它還提供了一個全局 fetch()方法，該方法提供了一種簡單，合乎邏輯的方式來跨網(wǎng)絡(luò)異步獲取資源。fetch 規(guī)范與 jQuery.ajax() 兩種方式的不同從 fetch()返回的 Promise 將不會拒絕HTTP錯誤狀態(tài), 即使響應(yīng)是一個 HTTP

2、 404 或 500。相反，它會正常解決 (其中ok狀態(tài)設(shè)置為false), 并且僅在網(wǎng)絡(luò)故障時或任何阻止請求完成時，它才會拒絕。默認(rèn)情況下, fetch在服務(wù)端不會發(fā)送或接收任何 cookies, 如果站點(diǎn)依賴于維護(hù)一個用戶會話，則導(dǎo)致未經(jīng)認(rèn)證的請求(要發(fā)送 cookies，必須發(fā)送憑據(jù)頭).Promise所謂 Promise，就是一個對象，用來傳遞異步操作的消息Promise 對象有以下兩個特點(diǎn)。（1）對象的狀態(tài)不受外界影響。Promise 對象代表一個異步操作，有三種狀態(tài)：Pending（進(jìn)行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失?。?。只有異

3、步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。（2）一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結(jié)果。Promise 對象的狀態(tài)改變，只有兩種可能：從 Pending 變?yōu)?Resolved 和從 Pending 變?yōu)?Rejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結(jié)果。就算改變已經(jīng)發(fā)生了，你再對 Promise 對象添加回調(diào)函數(shù)，也會立即得到這個結(jié)果。這與事件（Event）完全不同，事件的特點(diǎn)是，如果你錯過了它，再去監(jiān)聽，是得不到結(jié)果的。Fetch API 的支持情況if(window.fetch) / use fetch els

4、e /use ajax發(fā)起fetch請求在Fetch API中，最常用的就是fetch()函數(shù)。它接收一個URL參數(shù)，返回一個promise來處理response。response參數(shù)帶著一個Response對象。fetch(./fetch.txt).then(function (response) return response.json().then(function (data) console.log(data) ); )requestRequest接口定義了通過HTTP請求資源的request格式。參數(shù)需要URL、method和headers，同時Request也接受一個特定的bod

5、y，mode，credentials以及cache hints.mode屬性用來決定是否允許跨域請求，以及哪些response屬性可讀。same-origin:所有的請求遵守同源策略。如果請求是跨域的，那么返回一個簡單的errorno-cors：允許來自CDN的腳本、其他域的圖片和其他一些跨域資源，但是首先有個前提條件，就是請求的method只能是HEAD,GET或者POST。cors：通常用作跨域請求來從第三方提供的API獲取數(shù)據(jù)。只有有限的一些headers被暴露給Response對象，但是body是可讀的。credentials枚舉屬性決定了cookies是否能跨域得到。這個屬性與XHR

6、的withCredentials標(biāo)志相同，但是只有三個值，分別是omit（默認(rèn)）,same-origin以及include。caching hints 。Request對象也可以提供 caching hints 給用戶代理。這個屬性還在安全復(fù)審階段。Firefox 提供了這個屬性，但是它目前還不起作用。自定義請求的參數(shù)fetch() 接受第二個可選參數(shù)，一個可以控制不同配置的 init 對象：var myInit = method: GET, / headers: myHeaders, mode: cors, cache: default ;function fetchFun() fetch(

7、./fetch.txt,myInit) .then(function (res) if(res.ok = true) return res.json().then(function (data) console.log(data) ); else console.log(network is no ok, res.status); ), function(e) console.log(Fetch failed!, e); ResponseResponse中最常見的成員是status（一個整數(shù)默認(rèn)值是200）和statusText（默認(rèn)值是OK），對應(yīng)HTTP請求的status和reason。還有一個ok屬性，當(dāng)status為2xx的時候它是true。處理body無論Request還是Response都可能帶著body。由于body可以是各種類型，比較復(fù)雜，所以前面我們故意先略過它，在這里單獨(dú)拿出來講解。body可以是以下任何一種類型的實(shí)例：ArrayBufferArrayBufferView(Uint8Array and friends)Blob/File字符串URLSearchParamsFormData目前不被Gecko和Blink支持，F(xiàn)