React Native 使用Fetch發送網絡請求的示例代碼

來源：懂視網責編：小采時間：2020-11-27 22:24:24

React Native 使用Fetch發送網絡請求的示例代碼

React Native 使用Fetch發送網絡請求的示例代碼:我們在項目中經常會用到HTTP請求來訪問網絡，HTTP(HTTPS)請求通常分為GET、PUT、POST、DELETE，如果不指定默認為GET請求。在項目中我們常用到的一般為GET和POST兩種請求方式，針對帶參數的表單提交這類的請求，我們通常會使用POST的請求方式。

推薦度：

點擊下載本文 文檔為doc格式

導讀React Native 使用Fetch發送網絡請求的示例代碼:我們在項目中經常會用到HTTP請求來訪問網絡，HTTP(HTTPS)請求通常分為GET、PUT、POST、DELETE，如果不指定默認為GET請求。在項目中我們常用到的一般為GET和POST兩種請求方式，針對帶參數的表單提交這類的請求，我們通常會使用POST的請求方式。

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com