Fetch學習筆記。

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'
})

上傳JSON數據

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

Headers

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")); // [ ]

Body

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狀態改成已使用。