游戏技术文章

React Native 之 网络请求

时间:2017-2-14 17:54:55  作者:棋牌资源网  来源:棋牌资源网  查看:5647  评论:0
内容摘要:前言学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习本人接触 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);
        };
标签:ReactNative之网络请求 

欢迎加入VIP,【VIP售价:只要288元永久VIP会员】畅享商业棋牌游戏程序下载,点击开通!

下载说明


☉本站所有源码和资源均由站长亲自测试-绝对保证都可以架设,运营!
☉如源码和资源有损坏或所有链接均不能下载,请告知管理员,

☉本站软件和源码大部分为站长独资,资源购买和收集,放心下载!

☉唯一站长QQ:1004003180  [人格担保-本站注重诚信!]

☉购买建议E-mail:1004003180@qq.com   源码收购 E-mail:1004003180@qq.com    

☉本站文件解压密码  【文章内都自带解压密码,每个密码不同!】


本站提供的所有源码,均来源站长提供,仅学习交流 浙ICP备09009969号

由此产生不良后果和法律责任与本站无关,如果侵犯了您的版权,请来信告知 1004003180@qq.com 将及时更正和删除! 

Copyright © 2008-2021 棋牌资源网,你身边的棋牌资源下载站    All Rights Reserved