ReactNative官网例子练习(三)——请求网络
网络 请求 练习 例子 官网 ReactNative
2023-09-27 14:29:03 时间
要想完成一个APP,网络请求获取后台的数据基本上是必须的。无论是咋Android中还是在iOS中都是非常重要的部分ReactNative中当然也不例外。
React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的ajax)或是其他的网络API,那么Fetch用起来将会相当容易上手。这篇文档只会列出Fetch的基本用法,并不会讲述太多细节,你可以使用你喜欢的搜索引擎去搜索fetch api关键字以了解更多信息。
简单例子:点击按钮返回数据赋值给text
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
定义一个请求网络的方法getMoviesFromApiAsync()在TouchableHighlight的点击事件中调用。
例子中是将返回的数据保存在state中 请求完数据后更新state的值。更新的方式就是用this.setState()方法来赋值。一开始的时候遇到了一个问题 “Reactthis.setState is not a function”意思就是我们用的这个this对 它代表的是这个回掉本身不是我们构造方法中初始化的那个state。
解决方法:
(1)在点击给这个方法绑定this 在调用方法的地方 this.getMoviesFromApiAsync.bind(this) 调用bind(this)。
(2)在getMoviesFromApiAsync()方法中定义一个变量赋值为this 比如 var that = this;
然后再调用setState的地方 用that.setState();
效果图:
带参数的post请求:
定义一个方法在点击事件中调用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
效果图:
相关文章
- ZBench: 服务器一键测试脚本 / 自带结果导出vps网络测试
- 5G前夜 运营商如何实现网络创新?
- Linux系统编程-网络服务器:高并发(多线程、多进程能实现并发,但是实现不了高并发)【处理一百以内的请求数并发,可以尝试使用多线程实现】
- 谈谈MVVM和链式网络请求架构
- 半个美国网络瘫痪让一家中国企业负责?雄迈信息回应
- 网络I/o编程模型19 netty的编码与解码
- 使用RawSocket进行网络抓包
- CNNIC:中国网民规模达到7.1亿 接近一半人用过网络直播
- 央行就《非银行支付机构网络支付业务管理办法(征求意见稿)》有关问题答记者问
- 全球顶级创投布局中国SDN市场,云杉网络完成千万美元B轮融资
- iOS 网络输入流提供请求体(适用于大容量内容)
- 纸业供应链协同管理系统:重构纸业智慧供应网络,支撑企业数字化转型升级
- 【源码】"拆" 网络请求库-Volley(上)
- 新型僵尸网络Rakos:入侵设备后改造为C&C控制端,已感染数万台
- ios网络学习------2 用非代理方法实现同步post请求
- 微信小程序网络请求封装
- 7.网络爬虫—正则表达式详讲
- Android开发——网络请求
- 关于cors,(网络请求的)
- iOS网络_优化请求性能
- iOS开发网络篇—发送GET和POST请求(使用NSURLSession)
- iOS开发网络篇—GET请求和POST请求
- dotnet 6 精细控制 HttpClient 网络请求超时
- 02 网络面经:一个TCP连接可以发送多少个HTTP请求?
- React Native 网络请求封装:使用Promise封装fetch请求