幾乎市面上的App都少不了從服務器上獲取數據，這就需要進行網絡請求，RN中集成了很不錯的鏈式請求數據的方法(fetch API)。
RN網絡請求常用方法
fetch: 發送請求,默認Get請求
then : 傳入一個回調函數，當上一次操作處理完,就會自動執行
then的回調函數,并且自動把處理完的結果,作為參數傳遞給
then的回調函數
response.json(): 把請求到的數據轉換為json
catch : 在請求或者處理數據失敗的時候,就會執行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開發經驗的小伙伴，可以在Xcode控制臺輸出打印服務器返回的JSON數據，但是RN中返回的JSON數據如果直接打印，會出現:[object:object]的輸出信息，故如果想要查看服務器返回的內容，需要知道服務器返回數據的結構，來一層層的解析。
結果如下：
總結
以上是生活随笔為你收集整理的React Native --网络请求(fetch)的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
