在前端快速發展地過程中，為了契合更好的設計模式，產生了 fetch 框架，此文將簡要介紹下 fetch 的基本使用。
我的源博客地址：http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/
免費的高質量軟件開發視頻教程 https://devopen.club/
軟件開發每日頭條文章 https://techfoco.com/
在 AJAX 時代，進行 API 等網絡請求都是通過 XMLHttpRequest 或者封裝后的框架進行網絡請求。
現在產生的 fetch 框架簡直就是為了提供更加強大、高效的網絡請求而生，雖然在目前會有一點瀏覽器兼容的問題，但是當我們進行 Hybrid App 開發的時候，如我之前介紹的 Ionic 和 React Native，都可以使用 fetch 進行完美的網絡請求。
1. fetch 初體驗
在 Chrome 瀏覽器中已經全局支持了 fetch 函數，打開調試工具，在 Console 中可以進行初體驗。
先不考慮跨域請求的使用方法，我們先請求同域的資源，如在我的博客頁面中，打開 Console 進行如下請求。
我的源博客地址：http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/
此測試操作需要在我博客中打開控制台測試，因為會有跨域的問題。
{% codeblock lang:js%}
fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})
{% endcodeblock %}
返回的數據：
這樣就很快速地完成了一次網絡請求，我們發現返回的數據也比之前的 XMLHttpRequest 返回的數據豐富、易用的多。
2. 關於 fetch 標准概覽
雖然 fetch 還不是作為一個穩定的標准發布，但是在其一直迭代更新的 標准描述 中，我們發現已經包含了很多的好東西。
fetch 支持了大部分常用的 HTTP 的請求以及和 HTTP 標准的兼容，如 HTTP Method，HTTP Headers，Request，Response。
3. fetch 的使用
3.1 兼容瀏覽器的處理
可以通過下面的語句處理瀏覽器兼容的問題。
{% codeblock lang:js%}
if(self.fetch) {
// 使用 fetch 框架處理
} else {
// 使用 XMLHttpRequest 或者其他封裝框架處理
}
{% endcodeblock %}
3.2 一般構造請求的方法
使用 fetch 的構造函數請求數據后，返回一個 Promise 對象，處理即可。
{% codeblock lang:js%}
fetch("http://blog.parryqiu.com")
.then(function(response){
// do something...
})
{% endcodeblock %}
3.3 fetch 構成函數的其他選項
我們可以將與 HTTP Headers 兼容的格式加入到請求的頭中，如每次 API 的請求我們想不受緩存的影響，那么可以像下面這樣請求：
{% codeblock lang:js%}
fetch("http://blog.parryqiu.com", {
headers: {
'Cache-Control': 'no-cache'
}
})
.then(function(response){
// do something...
})
{% endcodeblock %}
具體的可選參數可以查看 這里。
如我們還可以這樣使用，添加了更多的頭部參數：
{% codeblock lang:js%}
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
var myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
};
fetch("http://blog.parryqiu.com", myInit)
.then(function(response){
// do something...
})
{% endcodeblock %}
3.4 返回的數據結構
在請求后的 Response 中，具體的定義在 這里。
常用的有：
- Response.status 也就是 StatusCode，如成功就是
200； - Response.statusText 是 StatusCode 的描述文本，如成功就是
OK； - Response.ok 一個 Boolean 類型的值，判斷是否正常返回，也就是 StatusCode 為
200-299。
做如下請求：
{% codeblock lang:js%}
fetch("http://blog.parryqiu.com")
.then(function(response){
console.log(response.status);
console.log(response.statusText);
console.log(response.ok);
})
{% endcodeblock %}
返回的數據：
3.5 Body 參數
因為在 Request 和 Response 中都包含 Body 的實現，所以包含以下類型：
- ArrayBuffer
- ArrayBufferView (Uint8Array and friends)
- Blob/File
- string
- URLSearchParams
- FormData
在 fetch 中實現了對應的方法，並返回的都是 Promise 類型。
這樣處理返回的數據類型就會變的特別地方便，如處理 json 格式的數據：
{% codeblock lang:js%}
var myRequest = new Request('http://api.com/products.json');
fetch(myRequest).then(function(response) {
return response.json().then(function(json) {
for(i = 0; i < json.products.length; i++) {
var name = json.products[i].Name;
var price = json.products[i].Price;
// do something more...
}
});
});
{% endcodeblock %}
4. 瀏覽器兼容
目前項目給出的瀏覽器支持如下圖，如果需要兼容低版本瀏覽器，那么可以通過上面介紹的瀏覽器兼容處理辦法解決此問題，不過相信很快就不需要考慮兼容問題了，在 Hybrid App 開發中使用基本沒有問題，因為基本都是基於 Node.js 進行開發的。
有朋友提出兼容性問題的嚴謹性，其實通過 JS polyfill，已經可以獲得很好的支持。
- 如使用 A window.fetch JavaScript polyfill 可以獲得如下支持。
- 如使用 fetch-ie8 可以獲得如下支持。
5. 結語
下面是一個格式更好的文檔，比標准描述的頁面更加清晰，供參考。
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
在使用 React Native 開發 App 的時候接觸到了 fetch，發現的確非常方便高效，框架的設計模式也非常清晰靈活，所以分享出來供大家探討。
更多的細節可以查閱相關文檔，有什么問題可以留言討論交流。
我的源博客地址：http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/