React Native 使用Fetch發送網路請求的範例程式碼，reactfetch

React Native 使用Fetch發送網路請求的範例程式碼，reactfetch

我們在項目中經常會用到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的例外。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。