轉載:http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/
在 JS 中使用 fetch 更加高效地進行網絡請求
在前端快速發展地過程中,爲了契合更好的設計模式,產生了 fetch 框架,此文將簡要介紹下 fetch 的基本使用。
在 AJAX 時代,進行請求 API 等網絡請求都是通過 XMLHttpRequest 或者封裝後的框架進行網絡請求。
現在產生的 fetch 框架簡直就是爲了提供更加強大、高效的網絡請求而生,雖然在目前會有一點瀏覽器兼容的問題,但是當我們進行 Hybrid App 開發的時候,如我之前介紹的 Ionic 和 React
Native,都可以使用 fetch 進行完美的網絡請求。
1. fetch 初體驗
在 Chrome 瀏覽器中已經全局支持了 fetch 函數,打開調試工具,在 Console 中可以進行初體驗。
先不考慮跨域請求的使用方法,我們先請求同域的資源,如在我的博客頁面中,打開 Console 進行如下請求。
1 |
fetch("http://blog.parryqiu.com").then(function(response){console.log(response)}) |
返回的數據:
這樣就很快速地完成了一次網絡請求,我們發現返回的數據也比之前的 XMLHttpRequest 豐富、易用的多。
2. 關於 fetch 標準概覽
雖然 fetch 還不是作爲一個穩定的標準發佈,但是在其一直迭代更新的 標準描述中,我們發現已經包含了很多的好東西。
fetch 支持了大部分常用的 HTTP 的請求以及和 HTTP 標準的兼容,如 HTTP Method,HTTP Headers,Request,Response。
3. fetch 的使用
3.1 兼容瀏覽器的處理
可以通過下面的語句處理瀏覽器兼容的問題。
1 |
if(self.fetch) { |
3.2 一般構造請求的方法
使用 fetch 的構造函數請求數據後,返回一個 Promise 對象,處理即可。
1 |
fetch("http://blog.parryqiu.com") |
3.3 fetch 構成函數的其他選項
我們可以將於 HTTP Headers 兼容的格式加入到請求的頭中,如每次 API 的請求我們想不受緩存的影響,那麼可以像下面這樣請求:
1 |
fetch("http://blog.parryqiu.com", { |
具體的可選參數可以查看 這裏。
如我們還可以這樣使用:
1 |
var myHeaders = new Headers(); |
3.4 返回的數據結構
在請求後的 Response 中,具體的定義在 這裏。
常用的有:
- Response.status 也就是 StatusCode,如成功就是
200
; - Response.statusText 是 StatusCode 的描述文本,如成功就是
OK
; - Response.ok 一個 Boolean 類型的值,判斷是否正常返回,也就是 StatusCode 爲
200-299
。
做如下請求:
1 |
fetch("http://blog.parryqiu.com") |
返回的數據:
3.5 Body 參數
因爲在 Request 和 Response 中都包含 Body 的實現,所以包含以下類型:
- ArrayBuffer
- ArrayBufferView (Uint8Array and friends)
- Blob/File
- string
- URLSearchParams
- FormData
在 fetch 中實現了對應的方法,並返回的都是 Promise 類型。
這樣處理返回的數據類型就會變的特別地方便,如處理 json 格式的數據:
1 |
var myRequest = new Request('http://api.com/products.json'); |
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,發現的確非常方便高效,框架的設計模式也非常清晰靈活,更多的細節可以查閱相關文檔,有什麼問題可以留言討論交流。