react-native fetch的具体使用方法


Posted in Javascript onNovember 01, 2017

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

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

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

fetch 初体验

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

fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})

返回的数据:

react-native fetch的具体使用方法

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

关于 fetch 标准概览

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

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

fetch 的使用

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

self.fetch = function (input, init) {
  return new Promise(function (resolve, reject) {
   var request = new Request(input, init)
   var xhr = new XMLHttpRequest()
   xhr.onload = function () {
    var options = {
     status: xhr.status,
     statusText: xhr.statusText,
     headers: parseHeaders(xhr.getAllResponseHeaders() || '')
    }
    options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL')
    var body = 'response' in xhr ? xhr.response : xhr.responseText
    resolve(new Response(body, options))
   }
   xhr.onerror = function () {
    reject(new TypeError('Network request failed'))
   }
   xhr.ontimeout = function () {
    reject(new TypeError('Network request failed888888888888'))
   }
   xhr.open(request.method, request.url, true)
   if (request.credentials === 'include') {
    xhr.withCredentials = true
   }
   if ('responseType' in xhr && support.blob) {
    xhr.responseType = 'blob'
   }
   request.headers.forEach(function (value, name) {
    xhr.setRequestHeader(name, value)
   })
   xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit)
  })
 }

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

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

相关问题点:

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

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

_timeout_fetch(fetch_promise, timeout = 15000) {
  let timeout_promise = new Promise(function (resolve, reject) {
   setTimeout(() => {
    reject('timeout promise');
   }, timeout)
  });
  return Promise.race([
   fetch_promise,
   timeout_promise
  ]);
 }

然后如下调用

this._timeout_fetch(
    fetch(url, requestParams)
     .then(response => response.json())
     .then(responseData => {
      resolve(responseData);
     })
     .catch(error => {
      reject(error);
     })
   )

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

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

xhr.timeout = init.timeout || 0;

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

let requestParams = {
   method: method,
   header: {
    "Content-Type": "application/json;charset=UTF-8",
   },
   timeout: 1000
  };

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对象上,修改方法如下

self.fetch = function (input, init) {
  var xhr = new XMLHttpRequest()
  let p = new Promise(function (resolve, reject) {
   var request = new Request(input, init)
   // xhr的各种设置,回调等
  })
  p.cancel = () => {
   xhr.abort()
  }
  return p;
 }

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

let promise = fetch(url);
  promise.then(res => {
  }).then(res => {
  }).catch(err => {
  })
  promise.cancel() // 取消该网络请求

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
如何手动实现es5中的bind方法详解
Dec 07 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
Vue异步加载about组件
Oct 31 #Javascript
微信小程序顶部可滚动导航效果
Oct 31 #Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 #Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 #Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 #Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 #Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 #Javascript
You might like
PHP新手上路(十)
2006/10/09 PHP
php 日期时间处理函数小结
2009/12/18 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php分页函数完整实例代码
2014/09/22 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
django的autoreload机制实现
2020/06/03 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
酒店总经理工作职责
2013/12/13 职场文书
护士在校生自荐信
2014/02/01 职场文书
元旦晚会策划方案
2014/02/18 职场文书
机械专业技术员求职信
2014/06/14 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
关于教师节的广播稿
2015/08/19 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python