一、fetch

　　fetch是一種XMLHttpRequest的一種替代方案，在工作當中除了用ajax獲取後臺資料外我們還可以使用fetch、axios來替代ajax

二、fetch的基本使用

　　1、npm install whatwg-fetch --save

　　2、import 'whatwg-fetch'

　　fetch(url,options).then((res)=>{

　　　　console.log(res);

　　},function(err){

　　　　console.log(err)

　　})

　　說明：

　　　　1、fetch的返回值是一個promise物件

　　　　2、options

　　　　method:HTTP請求方式，預設是GET

　　　　body:請求的引數

　　　　因為JSON內容是必須的，所以當設定主體時會呼叫JSON.stringify。

　　　　　　fetch('/xxx', {

       　　　　　　 method: 'post',

       　　　　　　 body: JSON.stringify({

           　　　　　　　　 username: '',

            　　　　　　　　password: ''

        　　　　　　})

    　　　　});

　　　　headers:HTTP請求頭

　　　　　　因為一般使用JSON資料格式，所以設定ContentType為application/json

 　　　　　　credentials:預設為omit,忽略的意思，也就是不帶cookie還有兩個引數，same-origin，意思就是同源請求帶cookie；include,表示無論跨域還是同源請求都會帶cookie

　　3、在.then裡面第一個回撥函式中處理response

　　　　status(number): HTTP返回的狀態碼，範圍在100-599之間

　　　　statusText(String): 伺服器返回的狀態文字描述

　　　　headers: HTTP請求返回頭

　　　　body: 返回體，這裡有處理返回體的一些方法

　　　　　　text(): 將返回體處理成字串型別

　　　　　　json()： 返回結果和 JSON.parse(responseText)一樣

　　　　　　blob()： 返回一個Blob，Blob物件是一個不可更改的類檔案的二進位制資料

　　　　如果請求一個XML格式檔案，則呼叫response.text。如果請求圖片，使用response.blob方法

　　注意：

　　cookie傳遞

　　必須在header引數裡面加上credentials: 'include'，才會如xhr一樣將當前cookies帶到請求中去

　　例子：

　　　　fetch("/restapi/shopping/v2/banners?consumer=1&type=1&latitude=39.930321&longitude=116.217377",{

                headers:{'Content-Type': 'application/json'}

            }).then(response => {

               return response.json()

            })

            .then((data)=>{

                console.log(data)

            })

總結：fetch與axios的區別

　　axios("http://xxx/xxx.json？a=123'").then((res)=>{

   　　 console.log(res)//這裡的r是響應結果

　　})

　　fetch("http://www.baidu.com").then((res)=>{

　　　　console.log(res);//是一個綜合各種方法的物件，並不是請求的資料

　　})

　　fetch返回的是一個未處理的方法集合，我們可以通過這些方法得到我們想要的資料型別。如果我們想要json格式，就執行response.json(),如果我們想要字串就response.text()

　　axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特徵：

　　　　從瀏覽器中建立 XMLHttpRequest

　　　　從 node.js 發出 http 請求

　　　　支援 Promise API

　　　　攔截請求和響應

　　　　轉換請求和響應資料

　　　　自動轉換JSON資料

　　　　客戶端支援防止CSRF/XSRF

　　fetch:

　　　　符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個物件裡

　　　　更加底層，提供的API豐富（request, response）

　　　　脫離了XHR，是ES規範裡新的實現方式

　　　　1）fetchtch只對網路請求報錯，對400，500都當做成功的請求，需要封裝去處理

　　　　2）fetch預設不會帶cookie，需要新增配置項

　　　　3）fetch不支援abort，不支援超時控制，使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺執行，造成了量的浪費

　　　　4）fetch沒有辦法原生監測請求的進度，而XHR可以