幾乎市面上的App都少不了從服務器上獲取數據，這就需要進行網絡請求，RN中集成了很不錯的鏈式請求數據的方法(fetch API)。
RN網絡請求常用方法
fetch: 發(fā)送請求,默認Get請求
then : 傳入一個回調函數，當上一次操作處理完,就會自動執(zhí)行then的回調函數,并且自動把處理完的結果,作為參數傳遞給then的回調函數
response.json(): 把請求到的數據轉換為json
catch : 在請求或者處理數據失敗的時候,就會執(zhí)行catch里的回調函數，捕獲異常
GET請求
//? 定義GET請求
getRequestData = (url) => {
? ? let args = {
? ? ? ? method:'GET',
? ? }
? ? fetch(url, args)
? ? ? ? .then((response)=>{
? ? ? ? ? ? return response.json();
? ? ? ? })
? ? ? ? .then((responseJson)=>{
? ? ? ? ? ? Alert.alert("提示", responseJson);
? ? ? ? })
? ? ? ? .catch((error)=>{
? ? ? ? ? ? Alert.alert("提示", error);
? ? ? ? })
};
POST請求
POST請求有三種方式:
application/x-www-form-urlencoded： 普通http請求方式，參數是普通的url參數拼接
application/json： JSON請求方式，參數是json格式
multipart/form-data: 文件上傳
Fetch還有可選的第二個參數，可以用來定制HTTP請求一些參數。你可以定制header參數，請求方式，提交數據。
application/x-www-form-urlencoded請求
注意:Content-Type:一定不要寫錯,否則服務器解析不出來
postRequestData = (url) => {
? ? let formData = {
? ? ? ? 'code':'011Tq1lm1ME6jj0o4vmm1Y7Ukm1Tq1le',
? ? };
? ? var opts = {
? ? ? ? method:'POST',
? ? ? ? body:JSON.stringify(formData),
? ? ? ? headers:{
? ? ? ? ? ? 'Authorization':'OAuth app_id=wx723cae7b28dca7c1, version=1.0, token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzA3NzQzOTAsInN1YiI6IntcInVuaW9uSWRcIjpcIm9WTVVPd2hBRlBvNkJJTm5JX2NGTkxITVVha29cIixcImFwcElkXCI6XCJ3eDcyM2NhZTdiMjhkY2E3YzFcIn0ifQ.cGJ9x_XFnKgDMwjlQIe6o32USn5idLtD0Ael_XAtalQ',
? ? ? ? ? ? 'Content-Type':'application/x-www-form-urlencoded',
? ? ? ? },
? ? ? ? timeout:20 * 1000,
? ? };
? ? fetch(url, opts)
? ? ? ? .then((response) => {
? ? ? ? ? ? if (response.ok) {
? ? ? ? ? ? ? ? return response.json();
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? .then((responseJson) => {
? ? ? ? ? ? console.log("結果Code：" + responseJson.code);
? ? ? ? ? ? console.log("結果message：" + responseJson.message);
? ? ? ? ? ? console.log("請求的名字為：" + responseJson.data.nickName);
? ? ? ? })
? ? ? ? .catch((error) => {
? ? ? ? ? ? console.log("錯誤信息為：" + error);
? ? ? ? });
};
application/json請求
JSON.stringify(param) => JSON對象轉字符串 {name:xmg} => '{name:xmg}'
因為body:只能放字符串,所以必須要把JSON對象轉字符串
注意:Content-Type:一定不要寫錯,否則服務器解析不出來
postRequestData = (url) => {
? ? let formData = {
? ? ? ? 'code':'011Tq1lm1ME6jj0o4vmm1Y7Ukm1Tq1le',
? ? };
? ? var opts = {
? ? ? ? method:'POST',
? ? ? ? body:JSON.stringify(formData),
? ? ? ? headers:{
? ? ? ? ? ? 'Authorization':'OAuth app_id=wx723cae7b28dca7c1, version=1.0, token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzA3NzQzOTAsInN1YiI6IntcInVuaW9uSWRcIjpcIm9WTVVPd2hBRlBvNkJJTm5JX2NGTkxITVVha29cIixcImFwcElkXCI6XCJ3eDcyM2NhZTdiMjhkY2E3YzFcIn0ifQ.cGJ9x_XFnKgDMwjlQIe6o32USn5idLtD0Ael_XAtalQ',
? ? ? ? ? ? 'Content-Type':'application/json',
? ? ? ? ? ? 'Accept': 'application/json',
? ? ? ? },
? ? ? ? timeout:20 * 1000,
? ? };
? ? fetch(url, opts)
? ? ? ? .then((response) => {
? ? ? ? ? ? if (response.ok) {
? ? ? ? ? ? ? ? return response.json();
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? .then((responseJson) => {
? ? ? ? ? ? console.log("結果Code：" + responseJson.code);
? ? ? ? ? ? console.log("結果message：" + responseJson.message);
? ? ? ? ? ? console.log("請求的名字為：" + responseJson.data.nickName);
? ? ? ? })
? ? ? ? .catch((error) => {
? ? ? ? ? ? console.log("錯誤信息為：" + error);
? ? ? ? });
};
有過iOS開發(fā)經驗的小伙伴，可以在Xcode控制臺輸出打印服務器返回的JSON數據，但是RN中返回的JSON數據如果直接打印，會出現:[object:object]的輸出信息，故如果想要查看服務器返回的內容，需要知道服務器返回數據的結構，來一層層的解析。
結果如下：
