React Native專案實戰之fetch請求

在 chrome 瀏覽器中已經全域性支援了 fetch 函式，開啟除錯工具，在 console 中可以進行體驗下fetch。先不考慮跨域請求的使用方法，我們先請求同域的資源。例如：

fetch("").then(function(response))

使用 fetch 的建構函式請求資料後，返回乙個 promise 物件，然後根據具體的實際情況處理。

fetch("")  
.then(function(response))

說明，在請求後的 response 中，常常有如下返回情況：

1.使用get方式進行網路請求，例如：

fetch('', ).then(function(response) ).catch(function(err) );

2.使用post方式進行網路請求，例如：

let param = ;
fetch(url, ).then(function(response) );

3.其它寫法，例如：

try ).then(function(response) );  
} catch(e)

4.帶header 或其它引數，例如：

fetch(url, ,
body: json.stringify()
})

我們先看看使用fetch並填充介面後的完整效果。

要實現上面的效果，我們需要對資料進行監聽，也就是所謂的狀態機機制。

state:

然後我們使用fetch進行網路請求，當有資料返回時，我們更改資料來源的資料。

requestdiscount() )
}).catch((error) => )
}

那麼什麼時候出發這個請求呢？當我們介面掛載的時候就觸發這個請求，所以我們在componentdidmount呼叫這個請求。

componentdidmount()

返回的內容如下：

, title: "今日爆款", deputy_typeface_color: "#21c0ae", imageurl: ""},, title: "電影特惠", deputy_typeface_color: "#c280fc", tplurl: "imeituan:", imageurl: ""},, title: "**出遊", deputy_typeface_color: "#fc6a56", tplurl: "imeituan:", imageurl: ""},, title: "今日推薦", deputy_typeface_color: "#fdb32b", tplurl: "imeituan:", imageurl: ""}], server: , paging:

}

到此，資料請求基本完成了，接下來就是怎麼將資料繪製到介面上的問題。為了方便我們需要自定義乙個gridview用來繪製這個九宮格介面。我們在render()中定義乙個props來接受請求返回的資料。**如下：

class gridview extends component 
render()  = this.props
let griditems = 
for (let i = 0; i < infos.length; i++) />
)griditems.push(griditem)
}return ();}
}const styles = stylesheet.create(,
});export default gridview;

然後我們在繪製每乙個griditem，這個有點類似於android的adapter或者ios的collectionviewcell。**如下，不做詳細的介紹：

var dimensions = require('dimensions');
var screen = dimensions.get('window');
class griditem extends component );}
}const styles = stylesheet.create(,
icon: 
});export default griditem;

到此我們就完成了fetch請求並繪製介面的功能。

附：本文原始碼

fetch請求二次封裝

React Native專案實戰之fetch請求

React Native專案實戰之fetch請求

React Native 之專案實戰五

React Native布局實戰

React Native專案實戰之fetch請求

React Native專案實戰之fetch請求

React Native 之 專案實戰 五

React Native布局實戰

相關推薦

React Native 之專案實戰五