React Native 之 网络请求 fetch
最近做React native开发,遇到了这种fetch请求,说实话,以前用ajax比较多,对这种fetch请求
还真是不怎么了解,所以花时间百度一下,看看大家怎么用的。顺便也需要封装一下网路请求的
get和post方法,方便下面的调用。
话不多说,直入主题:
开发中,从网络上加载数据一直是重点和难点,尤其是在做相应的细节优化方面,在React Native 中通常是用哪种
方式加载网络数据呢?
React Native 中通常是通过 Ajax 从服务器获取数据,在 componentDidMount
方法中创建 Ajex 请求,等到请求成功,
再用 this.setState
方法重新渲染UI
一、什么是 fetch
fetch 目前还不是 W3C 规范,是由 whatag 负责研发。与 Ajax 不同的是,它的 API 不是事件机制,而是采用目前
流行的 Promise(MDN Promise) 方式处理
格式:
fetch(url, init).then((response) => { // 数据解析方式}).then((responseData) => { // 获取到的数据处理}).catch((error) => { // 错误处理}).done();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 上面的示例中的
init
是一个对象,他里面包含了:- method:请求方式(GET、POST、PUT等)。
- headers:需要用到 Headers 对象使用这个参数。
- body:需要发送的数据
- mode:跨域设置(cors, no-cors, same-origin)
- cache:缓存选项(default, no-store, reload, no-cache, force-cache, or only-if-cached)
译注:
- body:不可传对象,用JSON.stringify({…})也不可以,在jQuery 中会自动将对象封装成 formData 形式,fetch不会。
- mode属性控制师傅跨域,其中 same-origin(同源请求,跨域会报error)、no-cors(默认,可以请求其它域的资源,
- 不能访问response内的属性)和 cros(允许跨域,可以获取第三方数据,必要条件是访问的服务允许跨域访问)。
- 使用 fetch 需要注意浏览器版本,但 React-Native 则不需要考虑。
response
对象可以有如下几种解析方式- arrayBuffer()
- json()
- text()
- blob()
- formData()
下面是一个最基本的请求,只传入一个参数,默认为 GET 方式请求
fetch(url).then((response) => response.json()) // json方式解析,如果是text就是 response.text().then((responseData) => { // 获取到的数据处理}).catch((error) => { // 错误处理 }).done();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 针对表单提交的请求,我们通常采用 POST 的方式。
方式一:
fetch(url, {method: "POST",headers: {"Content-Type": "application/x-www-form-urlencoded"}body:"key1=value&key2=value…&keyN=value"}).then((response) => { // 数据解析方式}).then((responseData) => { // 获取到的数据处理}).catch((error) => { // 错误处理}).done();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 在 JQuery 中,传入对象框架会自动封装成 formData 的形式,但是在 fetch 中没有这个功能,所以我们需要
- 自己初始化一个 FormData直接传给 body (补充:FormData也可以传递字节流实现上传图片功能)
方式二:
let formData = new FormData();formData.append("参数", "值");formData.append("参数", "值");fetch(url, {method:'POST,headers:{},body:formData,}).then((response)=>{if (response.ok) {return response.json();}}).then((json)=>{alert(JSON.stringify(json));}).catch.((error)=>{console.error(error);})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
译注:
- application/x-www-form-urlencoded: 窗体数据被编码为名称/值对。这是标准的编码格式。
- multipart/form-data: 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。
- text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。
- Fetch 跨域请求的时候默认是不带 cookie 的,如果需要进行设置 credentials:’include’。
二、获取 HTTP 头信息
console.log(response.headers.get('Content-Type'));...console.log(response.headers.get('Date'));
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
produces="text/html;charset=UTF-8"
三、fetchRequest使用如下:
get(url, func=false) {return fetch(url) // GET方式 获取Json数据 .then((response) => {let data = response.json(); // 解析数据为 json格式 return data; // 传递数据给下一步 }).then((json_data) => { // 接收刚刚获取到的数据 // 如果有回调 if( false!==func ){func(json_data); }}).catch ((error) => { // 从fetch开始,到最后一个then,有错误出现,则会捕捉错误。 console.warn('Catch info:'); console.error(error); }); },
post(url, ini_json={}, unlisted=false) {let token = '', // 身份识别码 headers = { // http请求头 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, body = '', // 用于post的数据 func = undefined !== ini_json.func? ini_json.func : false; // 回调函数 // 请求时,请求地址带上token if( false=== unlisted ){token = unlisted;// 这里是token }if( undefined !== ini_json.headers ){headers = init_json.headers; }// 暂不支持数组传输,已建议同类数据以逗号分隔 if( undefined !== ini_json.data ){// 如果有数据 for(let i in ini_json.data){body += i + '=' + encodeURIComponent(ini_json.data[i]) + '&'; }}return fetch(url, {method: 'POST', headers: headers, body: body, }).then((response) => {let data = response.json(); // 解析数据为 json格式 return data; // 传递数据给下一步 }).then((json_data) => { // 接收刚刚获取到的数据 // 如果有回调 if( false!==func ){func(json_data); }}).catch ((error) => { // 从fetch开始,到最后一个then,有错误出现,则会捕捉错误。 console.warn('Catch info:'); console.error(error); }); } }
React Native 之 网络请求 fetch相关推荐
- [react] react中发起网络请求应该在哪个生命周期中进行?为什么?
[react] react中发起网络请求应该在哪个生命周期中进行?为什么? 异步情况可以在componentDidMount()函数中进行. 同步的情况可以在componentWillMount()中 ...
- React Native --网络请求(fetch)
几乎市面上的App都少不了从服务器上获取数据,这就需要进行网络请求,RN中集成了很不错的链式请求数据的方法(fetch API). RN网络请求常用方法 fetch: 发送请求,默认Get请求 the ...
- react多个网络请求_react中网络请求的优化!
react中网络请求的优化! 在页面跳转的时候 我会去检查一下 redux中是否存在我需要的值 如果没有 我再去调用接口 如果有的话 那我就不去发网络请求: 如果上个接口挂掉了, 那么我下个接口就不发 ...
- react native 网络请求 axios
react native的网络请求推荐使用axios和fetch 两种方式,当前阐述的是axios 1.安装axios yarn add react-native-axios 2.创建一个js,进行基 ...
- react native 开发APP(六)网络请求,列表的使用
官网 https://reactnative.cn/ 项目下载地址:https://github.com/hebiao6446/DemoProject 陆续更新中... 在移动端开发的时候,我们基本上 ...
- React Native Fetch封装那点事...
每一门语言都离不开网络请求,有自己的一套Networking Api.React Native使用的是Fetch. 今天我们来谈谈与Fetch相关的一些事情. purpose 通过这篇文章,你将了解到 ...
- 鸿蒙开发-使用fetch发起网络请求
场景 鸿蒙基于JS搭建HelloWorld并修改国际化文件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050 在 ...
- React Native实例之房产搜索APP
React Native 开发越来越火了,web app也是未来的潮流, 现在react native已经可以完成一些最基本的功能. 通过开发一些简单的应用, 可以更加熟练的掌握 RN 的知识. 在学 ...
- React Native 移动开发入门与实战
课程简介 本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...
最新文章
- C#Hello World
- vsscode beego 没有提示_轻松搭建基于 Serverless 的 Go 应用(Gin、Beego 举例)
- 喜大普奔!BFE 控制平面正式开源发布!
- jzoj5230-队伍统计【状压dp】
- Rpc框架dubbo-client(v2.6.3) 源码阅读(二)
- k8s ReplicaSet
- kotlin学习二:初步认识kotlin
- 卫星导航开源代码汇总
- PDF能编辑吗,怎么添加PDF水印
- 【弱电综合课程设计】三菱PLC经步进驱动器控制步进电机调速和正反转(硬件连接+梯形图)
- Centos修复boot分区
- NVIDIA GeForce GTX 1050 Ti性能如何
- 商品详情页中特别注意的三件事
- 微信平台分账产品怎么选?
- dad my_My dad英语绘本.ppt
- 前端处理 token 时效性问题
- Week8 :差分约束,拓扑排序和kahn,强连通图和kosaraju
- ID卡(工卡)复制到手机NFC
- 怎么设置个人电脑做服务器(tomcat)
- LiFi网络优劣势解析
热门文章
- sql中join的各种用法
- troch3d open3d例子
- ‘torch.nn‘ has no attribute ‘SiLU‘
- c# websocketServer传图片
- python 多边形曲线
- python3生成avi文件
- C++使用thread类多线程编程
- TensorFlow配置日志等级
- 窗函数-减少傅里叶变换泄漏
- 伤害世界怎么自建服务器,Hurtworld伤害世界服务器怎么架设?服务器架设图文教程...