位置: 编程技术 - 正文

react-native fetch的具体使用方法

编辑:rootadmin

推荐整理分享react-native fetch的具体使用方法,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用。

在 AJAX 时代,进行请求 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。

现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的Ionic 和React Native,都可以使用 fetch 进行完美的网络请求。

fetch 初体验

在 Chrome 浏览器中已经全局支持了 fetch 函数,打开调试工具,在 Console 中可以进行初体验。先不考虑跨域请求的使用方法,我们先请求同域的资源,如在我的博客页面中,打开 Console 进行如下请求。

返回的数据:

这样就很快速地完成了一次网络请求,我们发现返回的数据也比之前的 XMLHttpRequest 丰富、易用的多。

关于 fetch 标准概览

虽然 fetch 还不是作为一个稳定的标准发布,但是在其一直迭代更新的 标准描述 中,我们发现已经包含了很多的好东西。

fetch 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容,如 HTTP Method,HTTP Headers,Request,Response。

fetch 的使用

react-native fetch的具体使用方法

fetch的入口函数定义在node_modules/whatwg-fetch.js文件中,如下

该函数在Network/fetch.js中被导出,最终在initializeCore.js中被注册为global的属性变为全局函数。fetch返回的是一个Promise。

跟随方法走向,依次调用的是XMLHttpRequest.js的send -> RCTNetworking.ios.js的sendRequest -> 最终调到原生端RCTNetworking.mm的sendRequest方法。

相关问题点:

1、为何fetch函数无法设置timeout?

为了设置fetch的timeout,我会如下定义一个函数

然后如下调用

先定义一个Promise,其在超时时间结束后reject。将这个Promise和fetch合并到Promise.race中,则一旦这两个请求谁先执行,另外一个会被舍弃。这样完成超时时间的设置。

但是查看源码发现oc中是有超时时间设置这个选项的,且js和oc通信时也传了这个参数,问题是出在入口函数fetch处,只需要在上面fetch方法中添加上如下

就可以在请求参数中设置超时时间了,如

2、fetch函数为何无法cancel?

fetch在原生端是NSURLSessionDataTask发的请求,这个是可取消的。在js端的XMLHttpRequest.js中也发现了abort方法,调用能够取消当前网络请求。问题出在了fetch的接口函数。

首先,要想请求能够取消,得拿到当前请求对应的requestId。请求的执行顺序是js端发起 -> OC生成Request,得到requestId,利用NSURLSessionDataTask发起请求 -> 将requestId通过回调的形式传回给js端,js若想取消该请求,执行abort方法即可。

要想fetch函数能够执行cancel,只需该方法将XMLHttpRequest对象返回即可。但是那样,就不再是一个Promise了。也可以将cancel方法绑定到返回的Promise对象上,修改方法如下

如此,调用的时候就比较恶习了,要如下

不能fecth().then().then()的模式调用,因为这样会导致返回的那个Promise不再是上面绑定了cancel的那个Promise。

标签: react-native fetch的具体使用方法

本文链接地址:https://www.jiuchutong.com/biancheng/369700.html 转载请保留说明!

上一篇:微信小程序顶部可滚动导航效果(微信小程序顶部导航栏怎么做)

下一篇:bootstrap Table的一些小操作(bootstraptable教程)

  • 物业管理费专票可以抵扣吗
  • 公司在筹备阶段可以不交社保
  • 实收资本记账凭证摘要怎么写
  • 科技公司的作用
  • 什么情况下增值税进项税额要转出
  • 包装物押金是含税价格吗
  • 城市生活垃圾处理收费管理办法
  • 子公司注销资产负债表如何合并
  • 突然收到银联入账收入怎么办
  • 企业承担个人所得税账务处理
  • 因台风造成原材料毁损计入什么科目
  • 专票密码区压线可以报销吗
  • 管理不善造成的损失怎么处理
  • 进项票小于销项票怎么办
  • 开业好不好
  • 营业外支出怎么冲减
  • 离退休人员福利
  • 付佣金代扣个人所得税税前列支
  • 生产车间制造费用包括
  • bios中关闭软盘
  • 支付宝国际驾照有效期是多久
  • 只有发票没有银行客户专用回单是啥意思
  • word2013压缩图片
  • win7步骤和详细教程
  • 固定资产核销是资产损失吗
  • 总公司固定资产包括哪些
  • vue3的生命周期
  • 奥林匹克国家公园
  • 公司向股东借款多久必须归还
  • vue修改表格数据
  • php 图片上传
  • 建筑劳务公司的法人代表有什么责任
  • php截取指定字符串
  • php面向对象编程
  • ElementUI中<el-form>标签中 ref、:model、:rules 的作用
  • 什么是男人无力的行为
  • 冲减预提成本分录
  • 帝国cms app
  • 政府补贴收入确认政策
  • 分页浏览是什么意思
  • 小规模纳税人代收水电费税率
  • 发放股票股利的账务处理
  • Windows上PostgreSQL安装配置教程
  • mysql安装配置教程csdn
  • DEDECMSV5.6将软件下载次数直接生成静态
  • 直接人工成本包括五险一金吗
  • 收到货款的会计分录怎么做账
  • 单位全额承担社保能税前扣除吗
  • 非公司员工可以报销差旅费吗
  • Centos5.5中安装Mysql5.5过程分享
  • 纳税滞纳金的计算方法
  • 进项税额是意思
  • 简易计税方法的适用范围
  • 固定资产盘亏账务处理的问题
  • 厂房测量费怎么做账
  • 保险收入如何做账
  • 支付快递费怎么做账
  • 验资账户需要对账吗
  • 挂靠地址如果被查了应该怎么处理?
  • 财务会计制度及核算软件备案怎么填写
  • 供应商质量考核单
  • 国际航班怎么报销
  • 工资全扣是什么意思
  • sqlserver临时表 效率
  • xp系统安装程序没反应
  • win8无线网络连接不上
  • linux find 命令详解
  • win7老是自动开机启动是怎么回事啊
  • win8.1原版系统安装教程
  • ubuntu安装音乐软件
  • glimp使用方法
  • 常用的git操作
  • 脚本添加crontab
  • 查看分区文件格式
  • pdb settrace
  • 简述javascript
  • 税务局验证码
  • 三星电视投屏显示不支持当前文件
  • 公交爱心卡需要每年审吗
  • 上海嘉定小学入学积分
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设