這次帶給大家用Fetch進行http請求，用Fetch進行http請求的注意事項有哪些，下面就是實戰案例，一起來看一下。
傳統Ajax是利用XMLHttpRequest(XHR)發送請求獲取數據，不注重分離的原則。而Fetch API是基於Promise設計，專為解決XHR問題而出現。
XMLHttpRequest是一個設計粗糙的API，其中配置和呼叫方式非常混亂。
使用XHR發送一個json請求：
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'json';
xhr.onload = function(){ console.log(xhr.response);
}
xhr.onerror = function(){ console.log('xhr error');
}
xhr.send();使用fetch做請求後：
fetch(url).then(function(response){ return response.json();
}).then(function(data){ console.log(data);
}).catch(function(e){ console.log('error' + e);
});es6寫法：
fetch(url).then(response=>response.json())
.then(data=>console.log(data))
.catch(e=>console.log('error' + e));處理text/html回應：
fetch(url).then(response=>response.text())
.then(data=>console.log(data))
.catch(e=>console.log('error' + e));取得頭資訊：
fetch(url).then((response)=>{ console.log(response.status); console.log(response.statusText); console.log(response.headers.get('Content-Type')); console.log(response.headers.get('Date')); return response.json();
}).then(data=>console.log(data))
.catch(e=>console.log('error' + e);設定頭資訊
fetch(url,{ headers:{ 'Accept': 'application/json', 'Content-Type': 'application/json'
}
}).then(response=>response.json())
.then(data=>console.log(data))
.catch(e=>console.log('error' + e);提交表單
fetch(url,{ method: 'post', body: new FormData(document.getElementById('form'))
}).then(response=>response.json())
.then(data=>console.log(data))
.catch(e=>console.log('error' + e);提交json資料
fetch(url,{ method: 'post', body: JSON.stringify({ username: document.getElementById('username').value, password: document.getElementById('password').value
})
}).then(response=>response.json())
.then(data=>console.log(data))
.catch(e=>console.log('error' + e);fetch特點
語法簡潔，更加語義化
基於標準Promise 實現，支援async/await
同構方便，使用isomorphic-fetch
#fetch相容性
瀏覽器相容性
fetch原生支援性不高，不過可以使用一些polyfill。
IE8是es3語法，需要引入es5的polyfill：es5-shim
#支援promise語法：es6-promise
fetch的polyfill：fetch-polyfill
#使用jsonp還需要引入：fetch-jsonp
開啟babel的runtime模式，可以使用async/await
fetch常見問題
#fetch請求預設不帶cookie，需要設定fetch(url,{credentials: 'include'});
伺服器回傳400、500錯誤碼不會reject，只有網路錯誤請求不能完成時才會reject;
總結
fetch API看起來簡單，卻是js語法不斷增強提高帶來的改善。
由於專案中普遍會引入各種庫去解決底層問題，對於基礎api的新增、拓展不太關注，久而久之會產生一種與標準的脫離感。以後應多多關注底層api的變化與基礎實現。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是用Fetch進行http請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！
