(
問渠那得清如許早芭，為有源頭活水來纬凤。雙手奉上RN官網(wǎng))
Networking: 網(wǎng)絡(luò)交互
- 使用Fetch
①發(fā)起請求
fetch('https://mywebsite.com/endpoint/', {
//請求方式
method: 'POST',
//指定一些請求頭信息
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
//指定一些請求體信息
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
②處理響應(yīng):默認(rèn)異步網(wǎng)絡(luò)操作,不要忘了捕獲處理異常,否則靜默丟掉
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);
});
}
或者使用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);
}
}
- 內(nèi)置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();
- 支持WebSocket
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);
};
