許多移動應用程序需要從遠程URL加載資源茶敏。您可能希望對REST API發(fā)出POST請求府适,或者您可能只需從另一臺服務器獲取一大塊靜態(tài)內容。
Using Fetch
React Native為您的網絡需求提供了獲取API塘秦。如果您以前使用過XMLHttpRequest或其他網絡API歹袁,Fetch看起來會很熟悉锹安。
發(fā)出請求
要從任意網址獲取內容叫榕,只需傳遞網址即可獲认ㄉ摹:
fetch('https://mywebsite.com/mydata.json');
設置頭參數玩裙,發(fā)送POST請求
fetch('[https://mywebsite.com/endpoint/](https://mywebsite.com/endpoint/)', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
});
處理響應內容
網絡是一種固有的異步操作兼贸。提取方法將返回一個Promise,使得直接編寫以異步方式工作的代碼:
function getMoviesFromApiAsync() {
return fetch('[https://facebook.github.io/react-native/movies.json](https://facebook.github.io/react-native/movies.json)')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}
您也可以在React Native應用程序中使用建議的ES2017 async / await語法:
async function getMoviesFromApi() {
try {
let response = await fetch(
'[https://facebook.github.io/react-native/movies.json](https://facebook.github.io/react-native/movies.json)'
);
let responseJson = await response.json();
return responseJson.movies;
} catch (error) {
console.error(error);
}
}
不要忘記抓取任何可能會被拋出的錯誤吃溅,否則會被默默地拋棄溶诞。