摘要：你也可以通過(guò)和的構(gòu)造函數(shù)直接創(chuàng)建請(qǐng)求和響應(yīng)，但是我們不建議這么做。以迭代器的形式返回對(duì)象中所有存在的名。使用的接口，你可以通過(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)你自己的對(duì)象。使用一個(gè)對(duì)象來(lái)讀取流中的數(shù)據(jù)，并將狀態(tài)改為已使用。

Fetch API提供了一個(gè)獲取資源的接口（包括跨域）。任何使用過(guò)XMLHttpRequest的人都能輕松上手，但新的API提供了更強(qiáng)大和靈活的功能集。
Fetch提供了對(duì)Request和Response對(duì)象的通用定義。使之今后可以被使用到更多地應(yīng)用場(chǎng)景中：無(wú)論是service workers、Cache API、又或則是其它處理請(qǐng)求和響應(yīng)的方式，甚至是任何一種需要你自己在程序中生成響應(yīng)的方式。
它還提供了一種定義，將CORS和HTTP原生的頭信息結(jié)合起來(lái)，取代了原來(lái)那種分離的定義。
發(fā)送請(qǐng)求或則獲取資源，需要使用WindowOrWorkerGlobalScope.fetch方法。它在很多接口中都被實(shí)現(xiàn)了，比如Window和WorkerGlobalScope。所以在各種環(huán)境中都可以用這個(gè)方法獲取到資源。
fetch()必須接受一個(gè)參數(shù)--資源的路徑。無(wú)論請(qǐng)求成功與否，它都返回一個(gè)Promise對(duì)象，resolve對(duì)應(yīng)請(qǐng)求的Response。你也可以傳一個(gè)可選的第二個(gè)參數(shù)init（參見(jiàn)Request）。
一旦Response被返回，就有一些方法可以使用了，比如定義內(nèi)容或者處理方法(參見(jiàn)Body)。
你也可以通過(guò)Request()和Response()的構(gòu)造函數(shù)直接創(chuàng)建請(qǐng)求和響應(yīng)，但是我們不建議這么做。它們應(yīng)該被用于創(chuàng)建其它API的結(jié)果。

*當(dāng)接收到一個(gè)代表錯(cuò)誤的HTTP狀態(tài)碼時(shí)，從fetch()返回的Promise不會(huì)被標(biāo)記為reject，即使該HTTP響應(yīng)的狀態(tài)碼是404或500.相反，它會(huì)將Promise狀態(tài)標(biāo)記為resolve(但是會(huì)將resolve的返回值的ok屬性設(shè)置為false)，僅當(dāng)網(wǎng)絡(luò)故障時(shí)或請(qǐng)求被阻止時(shí)，才會(huì)標(biāo)記為reject。
*默認(rèn)情況下，fetch不會(huì)從服務(wù)器端發(fā)送或接收任何cookie，如果站點(diǎn)依賴于用戶session，則會(huì)導(dǎo)致未經(jīng)認(rèn)證的請(qǐng)求(要發(fā)送cookies，必須設(shè)置credentials).

進(jìn)行fetch請(qǐng)求。
一個(gè)基本的fetch請(qǐng)求設(shè)置起來(lái)很簡(jiǎn)單。看看下面的代碼：

fetch("https://azu.github.io/promises-book/json/comment.json").then(function(response){
    return response.json()
}).then(function(myJson){
    console.log(myJson)
})

這里我們通過(guò)網(wǎng)絡(luò)獲取一個(gè)JSON文件并將其打印到控制臺(tái)。最簡(jiǎn)單的用法是只提供一個(gè)參數(shù)用來(lái)指明想fetch()到的資源路徑，然后返回一個(gè)包含響應(yīng)結(jié)果的promise（一個(gè)Response對(duì)象）。
當(dāng)然它只是一個(gè)HTTP響應(yīng)，而不是真的JSON。為了獲取JSON的內(nèi)容，我們需要使用json()方法。
fetch()接收第二個(gè)可選參數(shù)，一個(gè)可以控制不同配置的init對(duì)象：
參考fetch()，查看所有可選的配置和更多描述。

postData("",{answer:42}).then(
    data=>console.log(data)
).catch(
    error = >console.error(error)
)
function postData(url,data){
    return fetch(url,{
        body:JSON.stringify(data),
        cache:"no-cache",
        credentials:"same-origin",
        headers:{
            "user-agent":"Mozilla/4.0 MDN Example",
            "content-type":"application/json"
        },
        method:"POST",
        mode:"cors",
        redirect:"follow",
        referrer:"no-referrer",
    }).then(
        response=>response.json()
    )
}

為了讓瀏覽器發(fā)送包含憑據(jù)的請(qǐng)求(即使是跨域源)，要將credentials:"include"添加到傳遞給fetch()方法的init對(duì)象。

fetch("url",{
    credentials:"include"
})

如果你只想在請(qǐng)求URL與調(diào)用腳本位于同一起源處時(shí)發(fā)送憑據(jù)，請(qǐng)?zhí)砑觕redentials："same-origin".

fetch("url",{
    credentials:"same-origin"
})

要確保瀏覽器不在請(qǐng)求中包含憑據(jù)，請(qǐng)使用credentials:"omit"。

fetch("url",{
    credentials:"omit"
})

var url = "";
var data = {username:"example"};
fetch(url,{
    method:"POST",
    body:JSON.stringify(data),
    headers:new Headers({
        "COntent-Type":"application/json"
    })
}).then(res=>res.json())
.catch(error => console.error("Error:", error))
.then(response => console.log("Success:", response))

var formData = new FormData();
var fileFiled = document.querySelector("input[type="file"]");
formData.append("username","abc123");
formData.append("avatar",fileFiled.files[0]);
fetch("url",{
    method:"PUT",
    body:formData
})
.then(response => response.json())
.catch(error => console.error("Error:", error))
.then(response => console.log("Success:", response))

如果遇到網(wǎng)絡(luò)故障，fetch()promise將會(huì)reject，帶上一個(gè)TypeError對(duì)象。雖然這個(gè)情況經(jīng)常是遇到了權(quán)限問(wèn)題或類(lèi)似問(wèn)題--比如404不是一個(gè)網(wǎng)絡(luò)故障。想要精確判斷fetch()是否成功，需要包含promise resolved的情況，此時(shí)再判斷Response.ok是不是為true。類(lèi)似以下代碼：

fetch("flowers.jpg").then(function(response){
    if(reponse.ok){
        return response.blod();
    }
    throw new Error("Network response was not ok");
}).then(function(myBlod){
    var objectURL = URL.createObjectURL(myBlod);
    myImage.src = objectURL;
}).catch(function(error){
    console.log("There has been a problem with your fetch operation:",error.message)
})

除了傳給fetch()一個(gè)資源的地址，你還可以通過(guò)使用Request()構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)request對(duì)象，然后再作為參數(shù)傳給fetch():

var myHeaders = new Headers();
var myInit ={
    method:"GET",
    headers:myHeaders,
    mode:"cors",
    cache:"default"
};
var myRequest = new Request("flowers.jpg",myInit);
fetch(myRequest).then(function(response){
    return response.blod();
}).then(function(myBlod){
    var objectURL = URL.createObjectURL(myBlod);
    myImage.src = objectURL;
})

Fetch API的headers接口允許你的HTTP請(qǐng)求和響應(yīng)頭執(zhí)行各種操作。這些操作包括檢索，設(shè)置，添加和刪除。一個(gè)Headers對(duì)象具有關(guān)聯(lián)的頭列表，它最初為空，由零個(gè)或多個(gè)鍵值對(duì)組成。你可以使用append()方法添加之類(lèi)的方法添加到此。在該接口的所有方法中，標(biāo)題名稱(chēng)由不區(qū)分大小寫(xiě)的字節(jié)序列匹配。
方法：

Headers.append()//給現(xiàn)有的header添加一個(gè)值，或者添加一個(gè)未存在的header并賦值。
Headers.delete()//從Headers對(duì)象中刪除指定的header。
Headers.entries()//以迭代器的形式返回Headers對(duì)象中的所有鍵值對(duì)。
Headers.get()//從Headers對(duì)象中返回指定的header的第一個(gè)值。
Headers.has()//以布爾值的形式從Headers對(duì)象中返回是否存在指定的header。
Headers.keys()//以迭代器的形式返回Headers對(duì)象中所有存在的header名。
Headers.set()//替換現(xiàn)有的Header的值，或則添加一個(gè)未存在的header并賦值。
Headers.values()//以迭代器的形式返回headers對(duì)象中所有存在的header的值。

使用Headers的接口，你可以通過(guò)Headers()構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)你自己的headers對(duì)象。一個(gè)headers對(duì)象是一個(gè)簡(jiǎn)單的多名值對(duì)：

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type","text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

也可以傳一個(gè)多維數(shù)組或者對(duì)象字面量：

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});

它的內(nèi)容可以被獲?。?/p>

console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue");
 
console.log(myHeaders.get("Content-Length")); // 11
console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
 
myHeaders.delete("X-Custom-Header");
console.log(myHeaders.getAll("X-Custom-Header")); // [ ]

Fetch API中的body代表響應(yīng)/請(qǐng)求的正文，允許你聲明其內(nèi)容類(lèi)型是什么以及應(yīng)該如何處理。
正文由Request和Response實(shí)現(xiàn)。
方法：

Body.arrayBuffer()//使用一個(gè)buffer數(shù)組來(lái)讀取Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用。
Body.blod()//使用一個(gè)Blod對(duì)象來(lái)讀取Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用。
Body.formData()//使用一個(gè)FormData對(duì)象來(lái)讀取Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用。
Body.json()//使用一個(gè)JSON對(duì)象來(lái)讀取Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用。
Body.text()//使用一個(gè)USVString對(duì)象來(lái)讀取Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用。