React Native --网络请求(fetch)
几乎市面上的App都少不了从服务器上获取数据,这就需要进行网络请求,RN中集成了很不错的链式请求数据的方法(fetch API)。
RN网络请求常用方法
fetch: 发送请求,默认Get请求
then : 传入一个回调函数,当上一次操作处理完,就会自动执行then的回调函数,并且自动把处理完的结果,作为参数传递给then的回调函数
response.json(): 把请求到的数据转换为json
catch : 在请求或者处理数据失败的时候,就会执行catch里的回调函数,捕获异常复制代码
GET请求
// 定义GET请求
getRequestData = (url) => {let args = {method:'GET',}fetch(url, args).then((response)=>{return response.json();}).then((responseJson)=>{Alert.alert("提示", responseJson);}).catch((error)=>{Alert.alert("提示", error);})
};复制代码
POST请求
POST请求有三种方式:
- application/x-www-form-urlencoded: 普通http请求方式,参数是普通的url参数拼接
- application/json: JSON请求方式,参数是json格式
- multipart/form-data: 文件上传
Fetch还有可选的第二个参数,可以用来定制HTTP请求一些参数。你可以定制header参数,请求方式,提交数据。复制代码
application/x-www-form-urlencoded请求
- 注意:Content-Type:一定不要写错,否则服务器解析不出来
postRequestData = (url) => {let formData = {'code':'011Tq1lm1ME6jj0o4vmm1Y7Ukm1Tq1le',};var opts = {method:'POST',body:JSON.stringify(formData),headers:{'Authorization':'OAuth app_id=wx723cae7b28dca7c1, version=1.0, token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzA3NzQzOTAsInN1YiI6IntcInVuaW9uSWRcIjpcIm9WTVVPd2hBRlBvNkJJTm5JX2NGTkxITVVha29cIixcImFwcElkXCI6XCJ3eDcyM2NhZTdiMjhkY2E3YzFcIn0ifQ.cGJ9x_XFnKgDMwjlQIe6o32USn5idLtD0Ael_XAtalQ','Content-Type':'application/x-www-form-urlencoded',},timeout:20 * 1000,};fetch(url, opts).then((response) => {if (response.ok) {return response.json();}}).then((responseJson) => {console.log("结果Code:" + responseJson.code);console.log("结果message:" + responseJson.message);console.log("请求的名字为:" + responseJson.data.nickName);}).catch((error) => {console.log("错误信息为:" + error);});
};复制代码
application/json请求
- JSON.stringify(param) => JSON对象转字符串 {name:xmg} => '{name:xmg}'
- 因为body:只能放字符串,所以必须要把JSON对象转字符串
- 注意:Content-Type:一定不要写错,否则服务器解析不出来
postRequestData = (url) => {let formData = {'code':'011Tq1lm1ME6jj0o4vmm1Y7Ukm1Tq1le',};var opts = {method:'POST',body:JSON.stringify(formData),headers:{'Authorization':'OAuth app_id=wx723cae7b28dca7c1, version=1.0, token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzA3NzQzOTAsInN1YiI6IntcInVuaW9uSWRcIjpcIm9WTVVPd2hBRlBvNkJJTm5JX2NGTkxITVVha29cIixcImFwcElkXCI6XCJ3eDcyM2NhZTdiMjhkY2E3YzFcIn0ifQ.cGJ9x_XFnKgDMwjlQIe6o32USn5idLtD0Ael_XAtalQ','Content-Type':'application/json','Accept': 'application/json',},timeout:20 * 1000,};fetch(url, opts).then((response) => {if (response.ok) {return response.json();}}).then((responseJson) => {console.log("结果Code:" + responseJson.code);console.log("结果message:" + responseJson.message);console.log("请求的名字为:" + responseJson.data.nickName);}).catch((error) => {console.log("错误信息为:" + error);});
};复制代码
有过iOS开发经验的小伙伴,可以在Xcode控制台输出打印服务器返回的JSON数据,但是RN中返回的JSON数据如果直接打印,会出现:[object:object]的输出信息,故如果想要查看服务器返回的内容,需要知道服务器返回数据的结构,来一层层的解析。
结果如下:
React Native --网络请求(fetch)相关推荐
- 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- react native 网络请求 axios
react native的网络请求推荐使用axios和fetch 两种方式,当前阐述的是axios 1.安装axios yarn add react-native-axios 2.创建一个js,进行基 ...
- React Native 之 网络请求 fetch
最近做React native开发,遇到了这种fetch请求,说实话,以前用ajax比较多,对这种fetch请求 还真是不怎么了解,所以花时间百度一下,看看大家怎么用的.顺便也需要封装一下网路请求的 ...
- 【React Native】请求设备权限
React Native请求用户权限 Request user permissions from React Native, iOS + Android 参考链接:https://www.npmjs. ...
- 【苹果相册推送】软件安装表现到ListView中,把网络请求来的数据存储下来
推荐内容IMESSGAE相关 作者推荐内容 iMessage苹果推软件 *** 点击即可查看作者要求内容信息 作者推荐内容 1.家庭推内容 *** 点击即可查看作者要求内容信息 作者推荐内容 2.相册 ...
- 《React Native 精解与实战》已发售,附 80 集配套免费视频教程
<React Native 精解与实战>是我撰写并由机械工业出版社出版的 React Native 实战书籍,书中讲解了 React Native 框架底层原理.React Native ...
- 给所有开发者的React Native详细入门指南
本文为 Marno 原创,转载必须保留出处! 公众号[ aMarno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 建议先下载好 ...
- react native 开发APP(六)网络请求,列表的使用
官网 https://reactnative.cn/ 项目下载地址:https://github.com/hebiao6446/DemoProject 陆续更新中... 在移动端开发的时候,我们基本上 ...
- 理解 React Native 中的 AJAX 请求
曾经,大多数 Web 应用程序通过用户操作刷新整个网页以与 Web 服务器通信. 后来,AJAX(异步 JavaScript 和 XML)概念通过提供一种在后台与 Web 服务器通信的方式使 Web ...
最新文章
- 小程序获取用户手机号_社区团购小程序应该如何推广才能获取更多用户?
- 报告:AI技术正有效缩小亚洲医疗发展的差距
- python3.7下载包的命令_python3.7中安装paddleocr及paddlepaddle包的多种方法
- Logistics Regression公式推导
- JZOJ 5638. 【NOI2018模拟4.8】IIIDX
- JNI之C语言简单回顾
- 使用VideoView做个实用的视频播放器
- matlab计算位温,大气物理学复习资料
- 可视化排班管理_企业人事资源管理系统
- 微信语音麦克风静音_智能语音专题(二):语音信号处理
- 早该知道的 7 个JavaScript 技巧[转]
- html5原生自带的日期控件和时间控件
- mysql 导入SQL脚本及乱码处理
- li指令 汇编_汇编指令简介
- 开发人员系统功能设计常用办公软件分享
- 如何批量预测lncRNA靶向的miRNA?
- HDU4745 Two Rabbits(区间dp)
- S.M.A.R.T.
- 【转】数学专业参考书整理推荐V3.0版
- DNS flood攻击分析