摘要：你也可以通過和的構造函數直接創建請求和響應，但是我們不建議這么做。以迭代器的形式返回對象中所有存在的名。使用的接口，你可以通過構造函數來創建一個你自己的對象。使用一個對象來讀取流中的數據，并將狀態改為已使用。

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

*當接收到一個代表錯誤的HTTP狀態碼時，從fetch()返回的Promise不會被標記為reject，即使該HTTP響應的狀態碼是404或500.相反，它會將Promise狀態標記為resolve(但是會將resolve的返回值的ok屬性設置為false)，僅當網絡故障時或請求被阻止時，才會標記為reject。
*默認情況下，fetch不會從服務器端發送或接收任何cookie，如果站點依賴于用戶session，則會導致未經認證的請求(要發送cookies，必須設置credentials).

進行fetch請求。
一個基本的fetch請求設置起來很簡單。看看下面的代碼：

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

這里我們通過網絡獲取一個JSON文件并將其打印到控制臺。最簡單的用法是只提供一個參數用來指明想fetch()到的資源路徑，然后返回一個包含響應結果的promise（一個Response對象）。
當然它只是一個HTTP響應，而不是真的JSON。為了獲取JSON的內容，我們需要使用json()方法。
fetch()接收第二個可選參數，一個可以控制不同配置的init對象：
參考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()
    )
}

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

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

如果你只想在請求URL與調用腳本位于同一起源處時發送憑據，請添加credentials："same-origin".

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

要確保瀏覽器不在請求中包含憑據，請使用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))

如果遇到網絡故障，fetch()promise將會reject，帶上一個TypeError對象。雖然這個情況經常是遇到了權限問題或類似問題--比如404不是一個網絡故障。想要精確判斷fetch()是否成功，需要包含promise resolved的情況，此時再判斷Response.ok是不是為true。類似以下代碼：

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()一個資源的地址，你還可以通過使用Request()構造函數來創建一個request對象，然后再作為參數傳給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請求和響應頭執行各種操作。這些操作包括檢索，設置，添加和刪除。一個Headers對象具有關聯的頭列表，它最初為空，由零個或多個鍵值對組成。你可以使用append()方法添加之類的方法添加到此。在該接口的所有方法中，標題名稱由不區分大小寫的字節序列匹配。
方法：

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

使用Headers的接口，你可以通過Headers()構造函數來創建一個你自己的headers對象。一個headers對象是一個簡單的多名值對：

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");

也可以傳一個多維數組或者對象字面量：

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

它的內容可以被獲取：

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代表響應/請求的正文，允許你聲明其內容類型是什么以及應該如何處理。
正文由Request和Response實現。
方法：

Body.arrayBuffer()//使用一個buffer數組來讀取Response流中的數據，并將bodyUsed狀態改為已使用。
Body.blod()//使用一個Blod對象來讀取Response流中的數據，并將bodyUsed狀態改為已使用。
Body.formData()//使用一個FormData對象來讀取Response流中的數據，并將bodyUsed狀態改為已使用。
Body.json()//使用一個JSON對象來讀取Response流中的數據，并將bodyUsed狀態改為已使用。
Body.text()//使用一個USVString對象來讀取Response流中的數據，并將bodyUsed狀態改為已使用。