Fetch API 瞭解 及對比ajax、axois

 Fetch是什麼

 Fetch 是一個現代的概念, 等同於 XMLHttpRequest。它提供了許多與XMLHttpRequest相同的功能，但被設計成更具可擴展性和高效性。Fetch被不少瀏覽器所支持(兼容列表)。

 Fetch 提供了對 Request 和 Response （以及其餘與網絡請求有關的）對象的通用定義。

 Fetch 還利用到了請求的異步特性——它是基於 Promise 的。

 用法

fetch方法接受一個表示url的字符串或者一個Request對象做爲參數，第二個參數可選，包含配置信息。

返回值爲Promise對象。

請求成功後將結果封裝爲Response對象，Response對象上具備json, text等方法。

//基本用法示例
fetch(url).then(function(response) {
    return response.json();
}).then(function(data) {
    console.log(data);
}).catch(function(e){
    console.log('error');
});

Request配置項包括

method（請求方法）：如GET、POST

headers（請求頭信息）application/x-www-form-urlencodeed， multipart/form-data， application/json， text/xml

body（須要發送的信息）：注意GET或HEAD方法的請求不能包含body信息

mode（請求的模式）：如cors、no-cors或same-origin

credentials（自動發送當前域內cookie）：如 omit、same-origin 或者 include。爲了在當前域名內自動發送 cookie ， 必須提供這個選項

cache（請求的catch模式）：如default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached

redirect（重定向模式）：可自動(follow)或手動(manual)重定向

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

var myInit = {
    method: 'POST',
    credentials : 'include',//攜帶cookie請求
    //headers: {"Content-Type": "application/x-www-form-urlencoded"},
    headers : myHeaders,
    body:'para1=0&para2=2',
    mode: 'cors',
    cache: 'default' 
};
var myRequest = new Request(url,myInit);

fetch(myRequest)
.then(res => {
    return res.json()
})
.then(data => {
    console.log(data)
})

 

與ajax、axios區別

 一、JQuery.ajax()

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

傳統 Ajax 指的是 XMLHttpRequest（XHR）， 最先出現的發送後端請求技術，隸屬於原始js中，核心使用XMLHttpRequest對象，多個請求之間若是有前後關係的話，就會出現回調地獄。

JQuery ajax 是對原生XHR的封裝，除此之外還增添了對JSONP的支持。優勢無需多言，這裏指出幾個缺點：

1.JQuery項目很大，如果單純使用ajax卻要引入整個項目。定製化(連接)方案不支持CDN服務。

2.基於異步模型不友好，形成回調地獄。

 

 二、axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範。

在網上未找到缺點，大體優勢以下

1.從 node.js 建立 http 請求。

2.支持 Promise API。

3.客戶端支持防止CSRF(就是讓你的每一個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，後臺就能夠輕鬆辨別出這個請求是不是用戶在假冒網站上的誤導輸入，從而採起正確的策略。)。

4.提供了一些併發請求的接口（重要，方便了不少的操做）。

 

 三、fetch

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

fetch號稱ajax替代品，使用了ES6中的Promise對象。

優勢以下：

1.語法簡潔

2.基於標準 Promise 實現，支持 async/await

 

缺點以下：

1.fetch只對網絡請求報錯，對400，500都當作成功的請求，須要封裝去處理。

2.fetch默認不會帶cookie，須要添加配置項。

3.fetch不支持abort（正在支持中），不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺運行，形成了流量的浪費。

4.fetch沒有辦法原生監測請求的進度，而XHR能夠。