React Native 之 网络请求

前言

• 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习

• 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

• 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢

网路请求

• 在开发中，从网络上加载数据一直是重点和难点，尤其是在做相应的细节优化方面，在React Native 中通常是用哪种方式加载网络数据呢？
  • React Native 中通常是通过 Ajax 从服务器获取数据，在 componentDidMount 方法中创建 Ajex 请求，等到请求成功，再用 this.setState 方法重新渲染UI

什么是 fetch

• fetch 目前还不是 W3C 规范，是由 whatag 负责研发。与 Ajax 不同的是，它的 API 不是事件机制，而是采用目前流行的 Promise（MDN Promise）方式处理
• 如果想了解更多，可以前往这个网址进行学习：更多 fetch 学习点我

使用 fetch 请求数据示例

    fetch(request_url)
        .then((response) => response.json())
        .catch((error) => {
            resultData.shopData = undefined;
            this.setState({
                dataSource: this.getDataSource([]),
                isLoading: false
            });
        })
        .then((responseData) => {
            resultData.shopData = responseData.data;
            this.setState({
                dataSource: this.getDataSource(responseData.data)
            });
        })
        .done();

综合实例

• 到这里我们就可以根据所学的知识开发一款自己的APP应用了，在接下来的博文中，将结合所有知识，教大家开发一款完整的应用（正在抓取数据筹备中），很快就会和大家见面！感谢各位朋友的支持！

其他可用网路库

• React Native 中已经内置了 XMLHttpRequest API，一些基于XMLHttpRequest封装的第三方库也可以使用（如：axios、frisbee）但不能使用 jQuery,因为 jQuery中还使用了很多浏览器才有而RN中没有的东西

      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

• React Native 还支持 WebSocket，这种协议可以在单个TCP连接上提供全双工的通信信道

      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);
      };

下载说明