今天朋友提到fetch和ajax的區(qū)別這個問題衔肢，我突然發(fā)現(xiàn)自己好像也不咋知道怎么回答，所以需要整理一下豁翎。
一角骤、Ajax
Ajax的本質是使用XMLHttpRequest對象來請求數(shù)據(jù)，下面簡單貼下原生js實現(xiàn)：
function ajax(url, fnSucc, fnFaild)
{
//1.創(chuàng)建Ajax對象
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.連接服務器（打開和服務器的連接）
oAjax.open('GET', url, true);
//3.發(fā)送
oAjax.send();
//4.接收
oAjax.onreadystatechange=function (){
if(oAjax.readyState==4){
if(oAjax.status==200){
//alert('成功了：'+oAjax.responseText);
fnSucc(oAjax.responseText);
}else{
//alert('失敗了');
if(fnFaild){
fnFaild();
}
}
}
};
}
二谨垃、fetch
fetch 是全局量 window 的一個方法启搂，它的主要特點有：
1、第一個參數(shù)是URL:
2刘陶、第二個是可選參數(shù)胳赌，可以控制不同配置的 init 對象
3、使用了 JavaScript Promises 來處理結果/回調:
// 鏈式處理,將異步變?yōu)轭愃茊尉€程的寫法: 高級用法.
fetch('/some/url').then(function(response) {
return . //... 執(zhí)行成功, 第1步...
}).then(function(returnedValue) {
// ... 執(zhí)行成功, 第2步...
}).catch(function(err) {
// 中途任何地方出錯...在此處理 :(
});
三匙隔、fetch規(guī)范與jQuery.ajax()主要有兩種方式的不同疑苫，牢記：
1、從 fetch()返回的 Promise 將<b>不會拒絕HTTP錯誤狀態(tài)</b>, 即使響應是一個 HTTP 404 或 500。相反捍掺，它會正常解決 (其中ok狀態(tài)設置為false), 并且僅在網絡故障時或任何阻止請求完成時撼短，它才會拒絕。
可以做簡單的封裝
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response
} else {
var error = new Error(response.statusText)
error.response = response
throw error
}
}
function parseJSON(response) {
return response.json()
}
fetch('/users')
.then(checkStatus)
.then(parseJSON)
.then(function(data) {
console.log('request succeeded with JSON response', data)
}).catch(function(error) {
console.log('request failed', error)
})
2挺勿、默認情況下, fetch在服務端不會發(fā)送或接收任何 cookies, 如果站點依賴于維護一個用戶會話曲横，則導致未經認證的請求(要發(fā)送 cookies，必須發(fā)送憑據(jù)頭).
這一點也可以做一些處理：
如果想要在同域中自動發(fā)送cookie,加上 credentials 的 same-origin 選項
fetch(url, {
credentials: ’same-origin'
})
same-origin值使得fetch處理Cookie與XMLHttpRequest類似不瓶。 否則禾嫉，Cookie將不會被發(fā)送，導致這些請求不保留認證會話蚊丐。
對于CORS請求熙参，使用include值允許將憑據(jù)發(fā)送到其他域：
fetch(url, {
credentials: 'include'
})
四、總結
最后fetch采用了Promise的異步處理機制麦备，使用比ajax更加簡單孽椰，有可能會逐漸代替ajax，對于新技術大家還是要積極探索最好凛篙。
如有什么寫得不對的地方黍匾，歡迎批評指正
閱讀更多：
Fetch
HTTP access control (CORS)
Fetch polyfill
fetch使用的常見問題及其解決辦法
