在 ajax 時代，進行請求 api 等網絡請求都是通過xmlhttprequest 或者封裝後的架構進行網絡請求。而在前端快速發展地過程中，為了契合更好的設計模式，産生了 fetch 架構。 fetch相比xmlhttprequest，提供更加強大、高效的網絡請求方式，是以在 hybrid app 開發模式中，大量的用到了fetch架構作為網絡請求。
在 chrome 浏覽器中已經全局支援了 fetch 函數，打開調試工具，在 console 中可以進行體驗下fetch。先不考慮跨域請求的使用方法，我們先請求同域的資源。例如：
使用 fetch 的構造函數請求資料後，傳回一個 promise 對象，然後根據具體的實際情況處理。
說明，在請求後的 response 中，常常有如下傳回情況：
response.status 也就是 statuscode，如成功就是 200 ；
response.statustext 是 statuscode 的描述文本，如成功就是 ok ；
response.ok 一個 boolean 類型的值，判斷是否正常傳回，也就是 statuscode 為 200-299 。
1.使用get方式進行網絡請求，例如：
2.使用post方式進行網絡請求，例如：
3.其它寫法，例如：
4.帶header 或其它參數，例如：
我們先看看使用fetch并填充界面後的完整效果。
要實作上面的效果，我們需要對資料進行監聽，也就是所謂的狀态機機制。
然後我們使用fetch進行網絡請求，當有資料傳回時，我們更改資料源的資料。
那麼什麼時候出發這個請求呢？當我們界面挂載的時候就觸發這個請求，是以我們在componentdidmount調用這個請求。
請求的接口如下：
<a href="https://api.meituan.com/group/v1/deal/topic/discount/city/1?ci=1&client=iphone&moviebundleversion=100&msid=48e2b810-805d-4821-9cdd-d5c9e01bc98a2015-06-17-14-50363&userid=10086&utm_campaign=agroupbgroupd100fab_chunceshishuju__a__a___b1junglehomepagecatesort__b__leftflow___ab_gxhceshi__nostrategy__leftflow___ab_gxhceshi0202__b__a___ab_pindaochangsha__a__leftflow___ab_xinkeceshi__b__leftflow___ab_gxtest__gd__leftflow___ab_gxh_82__nostrategy__leftflow___ab_pindaoshenyang__a__leftflow___i_group_5_2_deallist_poitype__d__d___ab_b_food_57_purepoilist_extinfo__a__a___ab_trip_yidizhoubianyou__b__leftflow___ab_i_group_5_3_poidetaildeallist__a__b___ab_waimaizhanshi__b__b1___a20141120nanning__m1__leftflow___ab_pindaoquxincelue__a__leftflow___ab_i_group_5_5_onsite__b__b___ab_i_group_5_6_searchkuang__a__leftflow&utm_content=4b8c0b46f5b0527d55ea292904fd7e12e48fb7bea8df50bfe7828af7f20bb08d&utm_medium=iphone&utm_source=appstore&utm_term=5.7&uuid=4b8c0b46f5b0527d55ea292904fd7e12e48fb7bea8df50bfe7828af7f20bb08d&version_name=5.7">https://api.meituan.com/group/v1/deal/topic/discount/city/1?ci=1&client=iphone&moviebundleversion=100&msid=48e2b810-805d-4821-9cdd-d5c9e01bc98a2015-06-17-14-50363&userid=10086&utm_campaign=agroupbgroupd100fab_chunceshishuju__a__a___b1junglehomepagecatesort__b__leftflow___ab_gxhceshi__nostrategy__leftflow___ab_gxhceshi0202__b__a___ab_pindaochangsha__a__leftflow___ab_xinkeceshi__b__leftflow___ab_gxtest__gd__leftflow___ab_gxh_82__nostrategy__leftflow___ab_pindaoshenyang__a__leftflow___i_group_5_2_deallist_poitype__d__d___ab_b_food_57_purepoilist_extinfo__a__a___ab_trip_yidizhoubianyou__b__leftflow___ab_i_group_5_3_poidetaildeallist__a__b___ab_waimaizhanshi__b__b1___a20141120nanning__m1__leftflow___ab_pindaoquxincelue__a__leftflow___ab_i_group_5_5_onsite__b__b___ab_i_group_5_6_searchkuang__a__leftflow&utm_content=4b8c0b46f5b0527d55ea292904fd7e12e48fb7bea8df50bfe7828af7f20bb08d&utm_medium=iphone&utm_source=appstore&utm_term=5.7&uuid=4b8c0b46f5b0527d55ea292904fd7e12e48fb7bea8df50bfe7828af7f20bb08d&version_name=5.7</a>
傳回的内容如下：
到此，資料請求基本完成了，接下來就是怎麼将資料繪制到界面上的問題。為了友善我們需要自定義一個gridview用來繪制這個九宮格界面。我們在render()中定義一個props來接受請求傳回的資料。代碼如下：
然後我們在繪制每一個griditem，這個有點類似于android的adapter或者ios的collectionviewcell。代碼如下，不做詳細的介紹：
到此我們就完成了fetch請求并繪制界面的功能。
<a href="http://lib.csdn.net/article/reactnative/55885">fetch請求二次封裝</a>