異步請求fetch之初體驗

更好閱讀體驗可移步個人博客：Blog

導讀

傳遞信息到服務器，從服務器獲取信息，是前端發展的重中之重，尤爲是如今先後端分離的大前提下，先後端的數據交互是前端的必修科目了。從好久以前到如今，ajax都是每一個前端入行者必須技能。固然爲了便於開發者， 各類三方工具將ajax包裝，而後給開發者使用，jquery、axios等等。這都不是今天的重點， 今天要說一個JavaScript原生的獲取資源接口 Fetch API， 雖然各大瀏覽器支持率不高，可是這樣的一個概念確實值得了解學習，而且如今咱們能夠經過polyfill來實現不一樣瀏覽器的兼容性問題

Fetch

先來看看各個瀏覽器對fetch的原生支持狀況，能夠看到支持性並非很高，safari在10.1 以後才支持，ios更是10.3以後才支持，IE徹底不支持。固然新技術的發展總會經歷這個過程。不過，想提早嚐嚐鮮也是能夠的咱們可使用 polyfill

聲明：如下的全部代碼測試都是基於 Chrome 實現

廢話很少說，

fetch 返回的是一個Promise，咱們先來看一個基本的 fetch 結構

fetch(url, option).then( res => {
    //do something
}).catch(err => {
    //do something
})

fetch 的url 參數是必須的，option參數可選
以上就是整個的請求以及處理過程， 驚不驚喜，意不意外，沒錯就是這麼簡單清晰明瞭，沒有原生ajax的那些 XMLHttpRequest bulabula 一大堆。也不須要再額外引入一個jquery包（固然項目中使用到的話除外）。固然由於fetch的返回值是一個Promise， 不須要再去使用回調函數從而有效避免回調地獄。

固然，fetch不止於此，咱們的需求也不止於此，咱們可能須要post請求，可能須要跨域請求，控制從服務器獲取的信息的格式（json、string、blob等），此時，便須要設置參數信息，對返回信息進行處理。

option

來看看fetch的可選參數option的可選值，fetch默認是get方法，也能夠在option中設置爲其餘方法

• method：get | post 等方法
• headers：任何你想加到請求中的頭，能夠是對象字面量的方式也能夠是經過 Headers
• body：發送給服務器的信息， 能夠是JSON, ufferSource, FormData, URLSearchParams, 或 USVString。注意get和HEAD請求沒有body
• mode：請求模式， 可選值爲 cors, no-cors, same-origin, 或 navigate，cors-with-forced-preflight。默認值應該爲 cors。但在Chrome中，Chrome 47 以前的版本默認值爲 no-cors ，自Chrome 47起，默認值爲same-origin。--MDN Request
• credentials：在請求中是否須要憑據。在請求數據中根據是否須要攜帶Cookie 來設置其值，可選值爲omit（在請求中不懈怠認證憑據（Cookie））, same-origin（在同原站點下包含憑據）, 或 include（對全部網站包含認證憑據）
• cache：如何處理緩存，可取值有 default | no-store | no-cache | reload | force-cache | only-if-cached
• redirect：對重定向的處理，可取值 follow, error, redirect
• referrer：一個指定了no-referrer, client, 或一個 URL的 USVString 。默認值是client.
• integrity: 包括請求的 subresource integrity 值 (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

mode

mode 參數便於 CORS， 設置不一樣的值可使在不一樣的請求方式下，使得請求有效。

• cors：在同域和帶有CORS響應頭的跨域下能夠請求成功
• no-cors：經常使用於在跨域不帶CORS場景下， 此時請求發出而且會有響應，可是此時type爲「opaque」， status爲0 ，js獲取不到返回數據。
• same-origin：在同域下請求
• cors-with-forced-preflight：在請求前進行preflight 檢查

fetch("https://api.github.com/users/mzabriskie", {mode: "no-cors"}).then(response => {
    return response;
}).then(function(data) {
    console.log(data);
}).catch(function(e) {
    console.log("Oops, error");
});

執行以上代碼返回

fetch("https://api.github.com/users/mzabriskie", {mode: "cors"}).then(response => {
    return response;
}).then(function(data) {
    console.log(data);
}).catch(function(e) {
    console.log("Oops, error");
});

以上代碼返回

headers

該參數的值能夠爲對象字面量

headers： {
    "Content-Type": "application/json"
}

也能夠建立 Headers 對象，經過append() 和delete() 等方法對其進行操做，

var headers = new Headers();
headers.append( "Content-Type", "application/json");
fetch(url, {
    method: post,
    headers: headers,
    body: {
        name: "jack"
    }
})

Request

Fetch 提供了對 Request 和 Response （以及其餘與網絡請求有關的）對象的通用定義。因此在一個Fetch請求中，徹底能夠只使用Request 和 Response兩個對象，經過Request 設置參數，經過Response 對返回值進行處理。
一個Fetch還能夠寫成如下形式

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var option = { method: 'GET',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default' };

var myRequest = new Request('https://api.github.com/users/mzabriskie',option);

fetch(myRequest).then(function(response) {
    ... 
});

參數設置如 option 下介紹

Response

Fetch API 的Response接口呈現了對一次請求的響應數據

其包含一次請求的響應信息，響應狀態等。
包含的一些經常使用屬性（只讀）

• url：包含請求地址url
• status：響應狀態碼（200成功）
• ok：一個布爾值標識請求成功或失敗
• statusText：包含與狀態碼對應的狀態信息
• headers：包含於請求關聯的Headers對象

方法

• clone()： 建立Response對象的克隆

Response可使用如下方法，對響應數據進行處理

arrayBuffer()、blob()、formData()、json()、text()等
如下爲使用json() 方法返回的數據信息

fetch("https://api.github.com/users/mzabriskie", {mode: "no-cors"}).then(response => {
    return response.json();
}).then(function(data) {
    console.log(data);
}).catch(function(e) {
    console.log("Oops, error");
});

檢測請求是否成功

同XMLHttpResponse同樣，請求發出，服務器發出返回碼，除了407之外，其不會進入錯誤捕捉。也就是說除了網絡故障或者跨域請求被拒絕等請求失敗的狀況，fetch() 的Promise是不會 reject的，因此爲了請求能按照咱們的預期實現，咱們必須加一個判斷，判斷請求是否成功並返回了咱們想要的數據。咱們固然能夠像 XMLHttpResponse 同樣對響應的狀態碼進行判斷，不過咱們還有選擇，對response.ok 這個布爾值入手。
細心的同窗可能從以前的截圖中看到，在請求成功和失敗的狀況下，屬性 ok 的值 分別爲true 和false 這裏就不贅余天價截圖了，上代碼

fetch("https://api.github.com/users/mzabriskie", {mode: "cors"}).then(response => {
    if(response.ok) {
        response.json().then(data => {
            console.log(data);
        });
    } else {
        console.log("請求不成功，狀態碼爲", response.status);
    }
}).catch(function(e) {
    console.log("Oops, error");
});

致此， 一個 fetch 的簡單請求便完成了，可是fetch功能遠不止這些

fetch 與 ES7的async/await 搭配使用等等，路很長一步一腳印

參考連接

Fetch API - Web API 接口 | MDN
Request - Web API 接口 | MDN
Headers - Web API 接口 | MDN
Response - Web API 接口 | MDN
Body - Web APIs | MDN