【重點突破】—— fetch()方法介紹

時間 2019-11-20

標籤重點突破 fetch 方法介紹简体版

原文原文鏈接

前言：ant-design-pro的技術組成主要是react+redux+dva+antd+fetch+roadhog，dva在源碼包index.js裏面導出了fetch，可是若是不想使用fetch庫，想換成其餘庫也是能夠的（axios後期擴展性更好些），roadhog主要是基於webpack實現的封裝。關於fetch發送請求的代碼都封裝在了utils/request.js文件中。PS：這裏重點梳理對fetch()的使用學習，原文地址：大灰狼的小棉羊哥哥博客javascript

與XMLHttpRequest(XHR)相似，fetch()方法容許你發出AJAX請求。區別在於Fetch API使用Promise，所以是一種簡潔明瞭的API，比XMLHttpRequest更加簡單易用。

從Chrome 40開始，Fetch API能夠被利用在Service Worker全局做用範圍中，自Chrome 42開始，能夠被利用在頁面中。

若是你還不瞭解Promise，須要首先補充這方面知識。

基本的Fetch請求

讓咱們首先來比較一個XMLHttpRequest使用示例與fetch方法的使用示例。該示例向服務器端發出請求，獲得響應並使用JSON將其解析。

XMLHttpRequest

一個XMLHttpRequest須要設置兩個事件回調函數，一個用於獲取數據成功時調用，另外一個用於獲取數據失敗時調用，以及一個open()方法調用及一個send()方法調用。

function reqListener(){
    var data=JSON.parse(this.responseText);
    console.log(data);
}
function reqError(err){
    console.log("Fetch錯誤:"+err);
}
var oReq=new XMLHttpRequest();
oReq.onload=reqListener;
oReq.onerror=reqError;
oReq.open("get","/students.json",true);
oReq.send();

Fetch

一個fetch()方法的使用代碼示例以下所示：

fetch("/students.json")
.then(
    function(response){
        if(response.status!==200){
            console.log("存在一個問題，狀態碼爲："+response.status);
            return;
        }
        //檢查響應文本
        response.json().then(function(data){
            console.log(data);
        });
    }
)
.catch(function(err){
    console.log("Fetch錯誤:"+err);
});

在上面這個示例中，咱們在使用JSON解析響應前首先檢查響應狀態碼是否爲200。
一個fetch()請求的響應爲一個Stream對象，這表示當咱們調用json()方法，將返回一個Promise對象，由於流的讀取將爲一個異步過程。

響應元數據

在上一個示例中咱們檢查了Response對象的狀態碼，同時展現瞭如何使用JSON解析響應數據。咱們可能想要訪問響應頭等元數據，代碼以下所示：

fetch("/students.json")
.then(
    function(response){
        console.log(response.headers.get('Content-Type'));
        console.log(response.headers.get('Date'));
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.type);
        console.log(response.url);
    }
)

響應類型

當咱們發出一個fetch請求時，響應類型將會爲如下幾種之一：「basic」、「cors」或「opaque」。這些類型標識資源來源，提示你應該怎樣對待響應流。

當請求的資源在相同域中時，響應類型爲「basic」，不嚴格限定你如何處理這些資源。

若是請求的資源在其餘域中，將返回一個CORS響應頭。響應類型爲「cors」。「cors」響應限定了你只能在響應頭中看見「Cache-Control」、「Content-Language」、「Content-Type」、「Expires」、「Last-Modified」以及「Progma」。

一個「opaque」響應針對的是訪問的資源位於不一樣域中，但沒有返回CORS響應頭的場合。若是響應類型爲「opaque」，咱們將不能查看數據，也不能查看響應狀態，也就是說咱們不能檢查請求成功與否。目前爲止不能在頁面腳本中請求其餘域中的資源。

你能夠爲fetch請求定義一個模式以確保請求有效。能夠定義的模式以下所示：

"same-origin"：只在請求同域中資源時成功，其餘請求將被拒絕。
"cors"：容許請求同域及返回CORS響應頭的域中的資源。
"cors-with-forced-preflight"：在發出實際請求前執行preflight檢查。
"no-cors"：針對的是向其餘不返回CORS響應頭的域中的資源發出的請求（響應類型爲「opaque」），但如前所述，目前在頁面腳本代碼中不起做用。

爲了定義模式，在fetch方法的第二個參數中添加選項對象並在該對象中定義模式：

fetch("http://www.html5online.com.cn/cors-enabled/students.json",{mode:"cors"})
.then(
    function(response){
        console.log(response.headers.get('Content-Type'));
        console.log(response.headers.get('Date'));
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.type);
        console.log(response.url);
    }
)
.catch(function(err){
    console.log("Fetch錯誤:"+err);
});

Promise方法鏈

Promise API的一個重大特性是能夠連接方法。對於fetch來講，這容許你共享fetch請求邏輯。

若是使用JSON API，你須要檢查狀態而且使用JSON對每一個響應進行解析。你能夠經過在不一樣的返回Promise對象的函數中定義狀態及使用JSON進行解析來簡化代碼，你將只須要關注於處理數據及錯誤：

function status(response){
    if(response.status>=200 && response.status<300){
        return Promise.resolve(response);
    }
    else{
        return Promise.reject(new Error(response.statusText));
    }
}
function json(response){
    return response.json();
}
fetch("/students.json")
.then(status)
.then(json)
.then(function(data){
    console.log("請求成功，JSON解析後的響應數據爲:",data);
})
.catch(function(err){
    console.log("Fetch錯誤:"+err);
});

在上述代碼中，咱們定義了status函數，該函數檢查響應的狀態碼並返回Promise.resolve()方法或Promise.reject()方法的返回結果（分別爲具備確定結果的Promise及具備否認結果的Promise)。這是fetch()方法鏈中的第一個方法。若是返回確定結果，咱們調用json()函數，該函數返回來自於response.json()方法的Promise對象。在此以後咱們獲得了一個被解析過的JSON對象，若是解析失敗Promise將返回否認結果，致使catch段代碼被執行。html
這樣書寫的好處在於你能夠共享fetch請求的邏輯，代碼容易閱讀、維護及測試。html5

POST請求

在Web應用程序中常常須要使用POST方法提交頁面中的一些數據。

爲了執行POST提交，咱們能夠將method屬性值設置爲post，而且在body屬性值中設置須要提交的數據。

fetch(url,{
    method:"post",
    headers:{
        "Content-type":"application:/x-www-form-urlencoded:charset=UTF-8"
    },
    body:"name=lulingniu&age=40"
})
.then(status)
.then(json)
.then(function(data){
    console.log("請求成功，JSON解析後的響應數據爲:",data);
})
.catch(function(err){
    console.log("Fetch錯誤:"+err);
});