几乎市面上的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)相关推荐

  1. 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  2. react native 网络请求 axios

    react native的网络请求推荐使用axios和fetch 两种方式,当前阐述的是axios 1.安装axios yarn add react-native-axios 2.创建一个js,进行基 ...

  3. React Native 之 网络请求 fetch

    最近做React native开发,遇到了这种fetch请求,说实话,以前用ajax比较多,对这种fetch请求 还真是不怎么了解,所以花时间百度一下,看看大家怎么用的.顺便也需要封装一下网路请求的 ...

  4. 【React Native】请求设备权限

    React Native请求用户权限 Request user permissions from React Native, iOS + Android 参考链接:https://www.npmjs. ...

  5. 【苹果相册推送】软件安装表现到ListView中,把网络请求来的数据存储下来

    推荐内容IMESSGAE相关 作者推荐内容 iMessage苹果推软件 *** 点击即可查看作者要求内容信息 作者推荐内容 1.家庭推内容 *** 点击即可查看作者要求内容信息 作者推荐内容 2.相册 ...

  6. 《React Native 精解与实战》已发售,附 80 集配套免费视频教程

    <React Native 精解与实战>是我撰写并由机械工业出版社出版的 React Native 实战书籍,书中讲解了 React Native 框架底层原理.React Native ...

  7. 给所有开发者的React Native详细入门指南

    本文为 Marno 原创,转载必须保留出处! 公众号[ aMarno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 建议先下载好 ...

  8. react native 开发APP(六)网络请求,列表的使用

    官网 https://reactnative.cn/ 项目下载地址:https://github.com/hebiao6446/DemoProject 陆续更新中... 在移动端开发的时候,我们基本上 ...

  9. 理解 React Native 中的 AJAX 请求

    曾经,大多数 Web 应用程序通过用户操作刷新整个网页以与 Web 服务器通信. 后来,AJAX(异步 JavaScript 和 XML)概念通过提供一种在后台与 Web 服务器通信的方式使 Web ...

最新文章

  1. 小程序获取用户手机号_社区团购小程序应该如何推广才能获取更多用户?
  2. 报告:AI技术正有效缩小亚洲医疗发展的差距
  3. python3.7下载包的命令_python3.7中安装paddleocr及paddlepaddle包的多种方法
  4. Logistics Regression公式推导
  5. JZOJ 5638. 【NOI2018模拟4.8】IIIDX
  6. JNI之C语言简单回顾
  7. 使用VideoView做个实用的视频播放器
  8. matlab计算位温,大气物理学复习资料
  9. 可视化排班管理_企业人事资源管理系统
  10. 微信语音麦克风静音_智能语音专题(二):语音信号处理
  11. 早该知道的 7 个JavaScript 技巧[转]
  12. html5原生自带的日期控件和时间控件
  13. mysql 导入SQL脚本及乱码处理
  14. li指令 汇编_汇编指令简介
  15. 开发人员系统功能设计常用办公软件分享
  16. 如何批量预测lncRNA靶向的miRNA?
  17. HDU4745 Two Rabbits(区间dp)
  18. S.M.A.R.T.
  19. 【转】数学专业参考书整理推荐V3.0版
  20. DNS flood攻击分析

热门文章

  1. Windows常用命令行命令
  2. android StringBuffer的使用
  3. android 获取apk中的素材图片
  4. iOS App启动流程
  5. 纯虚函数竟然可以有实现体(但无任何实用价值,声明成普通虚函数就可以了)
  6. WebKit如何加载web页面
  7. 具体解释站点沙盒期的原因表现与解决的方法
  8. 【Android工具类】Activity管理工具类AppManager
  9. 怎么才能学好Java编程写好Java代码?
  10. Leetcode39.Combination Sum组合总和