在React Native中通常是通过 Ajax 请求从服务器获取数据，然后在componentDidMount 方法中创建 Ajax 请求，等到请求成功，然后再用 this.setState 方法重新渲染 UI。
一、fetch
fetch 目前还不是 W3C 规范，由 whatag 负责出品。与 Ajax 不同的是，它的 API 不是事件机制，而采用了目前流行的 Promise 方式处理。
来看写法例子
|
1 2 3 4 5 6 7 8 9 10 11 |
fetch('http://blog.duicode.com/?json=1', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) }) |
也可以使用传统的form表单形式提交
|
1 2 3 4 5 6 7 |
fetch('http://blog.duicode.com/?json=1', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: 'key1=value1&key2=value2' }) |
另外注意在处理服务器响应的时候是异步异步异步，异步的意思是你应该趁这个时间去做点别的事情，比如显示loading，而不是让界面卡住傻等！
|
1 2 3 4 5 6 7 8 9 10 |
getDataFromApi(url) { return fetch(url) .then((response) => response.json()) .then((responseJson) => { return responseJson; }) .catch((error) => { console.error(error); }); } |
二、其他AJAX网络库
React Native中已经内置了XMLHttpRequest API(也就是俗称的ajax)。一些基于XMLHttpRequest封装的第三方库也可以使用，例如frisbee或是axios等。但注意不能使用jQuery，因为jQuery中还使用了很多浏览器中才有而RN中没有的东西（所以也不是所有web中的ajax库都可以直接使用）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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', 'http://blog.duicode.com/?json=1'); request.send(); |
三、 WebSocket
React Native还支持WebSocket
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var ws = new WebSocket('ws://host.com/path'); ws.onopen = () => { // 打开一个连接 ws.send('something'); // 发送一个消息 }; ws.onmessage = (e) => { // 接收到了一个消息 console.log(e.data); }; ws.onerror = (e) => { // 发生了一个错误 console.log(e.message); }; ws.onclose = (e) => { // 连接被关闭了 console.log(e.code, e.reason); }; |
转载请注明：怼码人生 » React Native中的网络请求
