react native中的請求資料

2022-01-11 14:29:10 字數 2532 閱讀 1751

很多移動應用都需要從遠端位址中獲取資料或資源。你可能需要給某個 rest api 發起 post 請求以提交使用者資料,又或者可能僅僅需要從某個伺服器上獲取一些靜態內容。

使用 fetch

react native 提供了和 web 標準一致的fetch api,用於滿足開發者訪問網路的需求。

發起請求

要從任意位址獲取內容的話,只需簡單地將**作為引數傳遞給 fetch 方法即可(fetch 這個詞本身也就是獲取的意思):

fetch('');

fetch 還有可選的第二個引數,可以用來定製 http 請求一些引數。你可以指定 header 引數,

或是指定使用 post 方法,又或是提交資料等等:

fetch('', ,

body: json.stringify(),

});

fetch('', ,

body: 'key1=value1&key2=value2',

});

注意:使用 chrome 除錯目前無法觀測到 react native 中的網路請求,你可以使用第三方的react-native-debugger來進行觀測。

我暫時還沒有到使用react-native-debugger的時候,到了再寫一篇關於這個使用的部落格

處理伺服器的響應資料

上面的例子演示了如何發起請求。很多情況下,你還需要處理伺服器回覆的資料。

網路請求天然是一種非同步操作(譯註:同樣的還有asyncstorage,請不要再問怎樣把非同步變成同步!無論在語法層面怎麼折騰,

、它們的非同步本質是無法變更的。非同步的意思是你應該趁這個時間去做點別的事情,比如顯示 loading,而不是讓介面卡住傻等)。

fetch 方法會返回乙個promise,這種模式可以簡化非同步風格的**。

function getmoviesfromapiasync() )

.catch((error) => );

}

你也可以在 react native 應用中使用 es2017 標準中的async/await 語法:

// 注意這個方法前面有async關鍵字

async function getmoviesfromapi() catch (error)

}

別忘了 catch 住fetch可能丟擲的異常,否則出錯時你可能看不到任何提示。

下面是使用fetch的乙個小例子

import from 'react-native';

export default class fetchexample extends react.component

} componentdidmount() , function());

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

} render()

return(

,}keyextractor=

/>)}}

我們在模擬器上面可以看到

模擬器上的資料,返回的就是我們請求並展示的

我們可以在瀏覽器看看到我們請求的資料型別

使用其他的網路庫

react native 中已經內建了xmlhttprequest api(也就是俗稱的 ajax)。一些基於 xmlhttprequest 封裝的第三方庫也可以使用,

例如frisbee或是axios等。但注意不能使用 jquery,因為 jquery 中還使用了很多瀏覽器中才有而 rn 中沒有的東西(所以也不是所有 web 中的 ajax 庫都可以直接使用)。

需要注意的是,安全機制與網頁環境有所不同:在應用中你可以訪問任何**,沒有跨域的限制。

websocket 支援

react native 還支援websocket,這種協議可以在單個 tcp 連線上提供全雙工的通訊通道。

var ws = new websocket('ws:');

ws.onopen = () => ;

ws.onmessage = (e) => ;

ws.onerror = (e) => ;

ws.onclose = (e) => ;

React Native 之 網路請求 fetch

前言 fetch url,init then response then responsedata catch error done 譯註 下面是乙個最基本的請求,只傳入乙個引數,預設為get方式請求 fetch url then response response.json json方式解析,如果...

React Native中的flexbox布局

分類 react native 說到布局,不論是android還是ios還是web前端,都有涉及到,react native中也有布局,主要採用了類似css中的flexbox布局,不過這種布局跟css中的flexbox布局稍微有點不同,下面就記錄在react native中使用flexbox布局的方...

react native定位時請求開啟位置許可權

react native 在使用 geolocation 定位獲取經緯度的時候w,如果使用者不開啟位置資訊,不開啟gps,則會報錯,所以一開始應該判斷使用者有沒有開啟位置資訊,如果沒有的話請求使用者開啟位置資訊 我在android react native android location serv...