【React Native】文件翻譯閱讀紀錄 - 基礎 - 網路
 |
| Facebook Open Source React Native |
網路
許多移動應用需要從遠程URL加載資源。您可能希望向REST API發出POST請求，或者您可能只需要從另一台服務器獲取一大塊靜態內容。
使用 Fetch
React Native為您的網絡需求提供了Fetch API。如果您之前使用過XMLHttpRequest或其他網絡API，那麼Fetch似乎很熟悉。有關其他信息，請參閱MDN的使用提取指南。
發出請求
要從任意URL獲取內容，只需將URL傳遞給fetch：
fetch('https://mywebsite.com/mydata.json');
Fetch還採用可選的第二個參數，允許您自定義HTTP請求。您可能需要指定其他標頭，或發出POST請求：
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
});
查看獲取請求文檔以獲取完整的屬性列表。
處理響應
以上示例顯示瞭如何發出請求。在許多情況下，您會想要對響應做些什麼。
網絡是一種固有的異步操作。 Fetch方法將返回一個Promise，使得編寫以異步方式工作的代碼變得非常簡單：
網絡是一種固有的異步操作。 Fetch方法將返回一個Promise，使得編寫以異步方式工作的代碼變得非常簡單：
function getMoviesFromApiAsync() {
return fetch('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'
);
let responseJson = await response.json();
return responseJson.movies;
} catch (error) {
console.error(error);
}
}
不要忘記捕獲fetch可能引發的任何錯誤，否則它們將被靜默刪除。
默認情況下，iOS將阻止任何未使用SSL加密的請求。如果需要從明文URL（以http開頭的URL）獲取，則首先需要添加App Transport Security異常。如果您提前知道您需要訪問哪些域，則為這些域添加例外更安全;如果直到運行時才知道域，則可以完全禁用ATS。但請注意，自2017年1月起，Apple的App Store審核將需要合理的理由來禁用ATS。有關更多信息，請參閱Apple的文檔。
使用其他網絡庫
XMLHttpRequest API內置於React Native。這意味著您可以使用第三方庫，例如依賴它的 frisbee 或 axios，或者如果您願意，可以直接使用XMLHttpRequest API。
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
if (request.status === 200) {
console.log('success', request.responseText);
} else {
console.warn('error');
}
};
request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();
XMLHttpRequest的安全模型與Web上的安全模型不同，因為本機應用程序中沒有CORS的概念。
支援 WebSocket
React Native還支持WebSockets，這是一種通過單個TCP連接提供全雙工通信通道的協議。
var ws = new WebSocket('ws://host.com/path');
ws.onopen = () => {
// connection opened
ws.send('something'); // send a message
};
ws.onmessage = (e) => {
// a message was received
console.log(e.data);
};
ws.onerror = (e) => {
// an error occurred
console.log(e.message);
};
ws.onclose = (e) => {
// connection closed
console.log(e.code, e.reason);
};
舉手擊掌！
如果你通過線性閱讀教程來到這裡，那麼你就是一個令人印象深刻的人類。恭喜。接下來，您可能希望查看社區使用React Native執行的所有酷炫功能。
0 意見