Fetch請求

爲何要用Fetch請求？

XMLHttpRequest是一個設計粗糙的API，不符合關注分離的原則，儘管開發者只關心請求成功後的業務處理，可是也要配置其餘繁瑣內容，致使配置和調用方式很是混亂，並且基於事件的異步模型寫起來也沒有現代的Promise、async/await好。

 

Fetch()方法用於發起獲取資源的請求，他返回一個promise，這個promise會在請求響應後被resolve，並傳回Response對象。

使用XHR發送一個json請求通常是這樣：

var url="fetch.json";
var xhr=new XMLHttpRequest();
xhr.open('GET',url,true);
xhr.responseType='json';
xhr.send();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
        console.log(xhr.response);
    }
}

使用Fetch請求後，頓時簡單明瞭

fetch(url，{
　　攜帶的參數
}).then(response=>response.json())
.then(data=>{
    console.log(data);
})

fetch()請求返回的response是Stream對象，所以須要調用response.json()是因爲異步讀取流對象，因此返回的是一個Promise對象。

 

Fetch請求的優勢：

（1）語法簡單，更加語義化；

（2）基於Promise實現，支持async/await

 

Fetch請求常見坑：

（1）Fetch請求默認是不帶Cookie的，須要fetch(url,{credentials:'include'})

（2）服務器返回400、500錯誤碼時並不會reject，只有網絡錯誤這些致使請求不能完成時，fetch纔會被reject。

（3）兼容性問題