JavaScript 中的 ajax 很早之前就有一個詬病————複雜業務下的 callback 嵌套的問題。promise 正是 js 中解決這一問題的鑰匙。 接下來我們在react項目中應用到的fetch 就用到了最新的 promise。 那我們如何在react項目中應用fetch呢？ 第一步： ...
JavaScript 中的 ajax 很早之前就有一個詬病————複雜業務下的 callback 嵌套的問題。promise 正是 js 中解決這一問題的鑰匙。
接下來我們在react項目中應用到的fetch 就用到了最新的 promise。
那我們如何在react項目中應用fetch呢？
第一步：安裝
用 npm 安裝的話，執行cnpm install whatwg-fetch --save即可安裝。
為了相容老版本瀏覽器，還需要安裝 es6-promise
第二步：在實際項目中的應用。
第一種get 使用。
首先要引入依賴的插件，見./app/fetch/test.js中
然後這樣就可以發起一個 get 請求。
先看我們的./app/index.jsx文件內容，他需要引用getData
這裡的fetch是引用了插件之後即可用的方法，使用非常簡單。方法的第一個參數是 url 第二個參數是配置信息。
fetch 方法請求數據，返回的是一個 Promise 對象。
以上代碼的配置中，credentials: 'include'表示跨域請求是可以帶cookie（fetch 跨域請求時預設不會帶 cookie，需要時得手動指定
credentials: 'include'。這和 XHR 的 withCredentials 一樣），headers可以設置 http 請求的頭部信息。
第二種post使用
可以根據get請求的方法進行同理的引用插件，在我們的./app/index.jsx中，我們需要引用
然後用 fetch 發起一個 post 請求（有method: 'POST'），第一個參數是 url，第二個參數是配置信息。註意下麵配置信息中的headers和
body的格式。fetch 提交數據之後，返回的結果也是一個 Promise 對象，跟 get 方法一樣。
我們以上兩個用法中，返回的Promis對象不一樣，一個是res.text()，一個是res.json()。這兩個方法就是將返回的 Response 數據轉換成
字元串或者JSON格式，這也是 js 中常用的兩種格式。
接下來我們要做的事情，其實是一個精簡工作。如果每次獲取數據，都向上面一樣寫好多代碼，就太冗餘了，我們這裡將 get 和 post 兩個方法單獨抽象出來。
這兩個方法抽象之後，接下來我們再用，就變得相當簡單了。
第一步：提取公共部分
getjs部分
postjs提取部分
接下來看我們的./app/index.jsx文件是如何應用的
接下來運行項目即可。
本博客升華自：大眾點評app視頻。
完整的demo見github:https://github.com/JserJser/reactWebApp/tree/master/react-fetch。
