用Fetch進行http請求

這次帶給大家用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中文網其它相關文章！

推薦閱讀：

React.js中的CSS使用

JS中的async/await

#

以上是用Fetch進行http請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！