在React Native中如何使用Fetch發送網路請求

本篇文章主要介紹了React Native 使用Fetch發送網路請求的範例程式碼，具有一定的參考價值，有興趣的小夥伴們可以參考一下

我們在專案中經常會用到HTTP請求來存取網絡，HTTP(HTTPS)請求通常分為"GET"、"PUT"、"POST"、"DELETE"，如果不指定預設為GET請求。

在專案中我們常用到的一般為GET和POST兩種請求方式，針對帶參數的表單提交這類的請求，我們通常會使用POST的請求方式。

為了發出HTTP請求，我們需要使用到 React Native 提供的 Fetch API 來實現。要從任意位址取得內容的話，只需簡單地將網址作為參數傳遞給fetch方法即可（fetch這個字本身也就是取得的意思

GET

如果你想要透過GET 方法去請求資料並轉換成JSON，可以透過以下程式碼實作：

fetch('https://facebook.github.io/react-native/movies.json')
   .then((response) => response.json())
   .then((responseJson) => {
    return responseJson.movies;
   })
   .catch((error) => {
    console.error(error);
   });

透過上面的請求把傳回的Response 轉換成JSON Object，然後取出JSON Object 裡的movies 字段。同時，如果發生Error，如網路不通或存取連線錯誤等， 會被.catch 。在正常的情況下，我們可以得到以下結果：

{
 "title": "The Basics - Networking",
 "description": "Your app fetched this from a remote endpoint!",
 "movies": [
  { "title": "Star Wars", "releaseYear": "1977"},
  { "title": "Back to the Future", "releaseYear": "1985"},
  { "title": "The Matrix", "releaseYear": "1999"},
  { "title": "Inception", "releaseYear": "2010"},
  { "title": "Interstellar", "releaseYear": "2014"}
 ]
}

POST（一）

當然，上面是最基本的GET 請求，Fetch還有可選的第二個參數，可以用來自訂HTTP請求一些參數。你可以指定Headers參數，或是指定使用POST方法，又或是提交資料等等：Fetch API 也支援自訂Headers，更換Method，新增Body 等。

let url = "http://www.yousite.com/xxxx.ashx” 
let params = {"name":"admin","password":"admin"}; 
fetch(url, {
 method: 'POST',
 headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json',
 },
 body: JSON.stringify(params)
})

上面建置了一個基本的POST 請求，新增了自己的Headers:Accept和Content-Type，新增了Body。

POST（二）

let url = "http://www.yousite.com/xxxx.ashx”; 
let params = "username=admin&password=admin”; 
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: params,
}).then((response) => {
  if (response.ok) {
    return response.json();
  }
}).then((json) => {
  console.log(json)
}).catch((error) => {
  console.error(error);
});

POST(三)推薦

透過上面兩種方法，我們還有一種方式可以傳送POST請求，當然這種方式也是被推薦使用的。

如果你的伺服器無法辨識上面POST的資料格式，那麼可以嘗試傳統的form格式，範例如下：

let REQUEST_URL = 'http://www.yousite.com/xxxx.ashx';

// `首先我们需要自己创建一个FormData，来存请求参数`

let parameters = new FormData();
parameters.append("mt", "30013");
parameters.append("pg", "1");
parameters.append('ps', '20');


fetch(REQUEST_URL, {
  method: 'POST',
  body: parameters
}).then(
  (result) => {
    if (result.ok) {
      console.log(result)
      result.json().then(
        (obj) => {
          console.log(obj)
        }
      )
    }
  }
).catch((error) => {
  console.log(error)
  Alert.alert('Error')
})

推薦這種方法的好處還有一個，就是可以在FormData中直接傳遞位元組流實現上傳圖片的功能，程式碼如下：

uploadImage(){ 
 let formData = new FormData(); 
 let file = {uri: uri, type: 'multipart/form-data', name: 'a.jpg'}; 

 formData.append("images",file); 

 fetch(url,{ 
  method:'POST', 
  headers:{ 
    'Content-Type':'multipart/form-data', 
  }, 
  body:formData, 
 }) 
 .then((response) => response.text() ) 
 .then((responseData)=>{ 

  console.log('responseData',responseData); 
 }) 
 .catch((error)=>{console.error('error',error)}); 

}

處理伺服器的回應數據

上面的範例示範如何發起請求。很多情況下，你還需要處理伺服器回覆的資料。
網路請求天然是一種非同步操作，Fetch 方法會回傳一個Promise，這個模式可以簡化非同步風格的程式碼，關於Promise，請參考：Promise

處理伺服器返回的數據，我們已經在上面第二種和第三種的POST請求中實現了數據的處理。具體程式碼參考上面的實作程式碼。

預設情況下，iOS會阻止所有非https的請求。如果你要求的介面是http協議，那麼首先需要新增一個App Transport Security的例外。

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

在knockoutjs上如何實作flux

使用vue如何實作無縫捲動元件

相關JavaScript陣列操作困難（詳細教學）

在微信小程式中如何實作按讚功能

以上是在React Native中如何使用Fetch發送網路請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！