Networking (网络)
大部分移动应用程序都需要从一个远程网址上加载数据资源,那么我们需要向一个接口发送一个请求,或者只需要从另外一个服务器获取一个静态内容.
1.Using Fetch (使用Fetch)
React Native为我们提供了网络请求所需要的Fetch API .
Making requests (发起请求)
想从任意网址获取内容？只需要通过网址获取即可:
fetch(‘https://mywebsite.com/mydata.json‘)
Fetch 的可选参数,允许你定制HTTP请求,可以额外指定 headers 或者使用 POST/GET 的方式进行请求:
fetch(‘https://mywebsite.com/endpoint/‘,{ method:‘POST‘, headers:{ ‘Accept‘:‘application/json‘, ‘Content-Type‘:‘application/json‘, }, body:JSON.stringify({ firstParam:‘yourValue‘, secondParam:‘yourOtherValue‘, }) })
2.Handling the response (处理响应)
在上面的例子中我们已经学习了如何发起一个请求,那么请求发起以后,我们通常可以获得到请求的响应情况.
这里的网络请求是一个异步操作,它将会返回一个响应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); }); }
你可以使用 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); } }
不要忘记捕获一下错误,如果没有捕获,系统将为自动丢弃.
默认情况下, iOS 将阻止任何不使用SSL加密的请求,如果你需要使用不加密的 URL ,那么需要添加一个传输安全的例外.
如果你知道 URL 访问的域,那么添加例外会更安全. 你可以禁止ATS。
3.Using Other Networking Libraries (使用其他的网络库)
React Native内置了XMLHttpRequest API. 这样你可以使用第三方的库来操作,比如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 上不同,因为原生APP没有CORS这个概念.
4.WebSocket Support (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 Networking API
，