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 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
走出JavaScript初学困境—js初学
Dec 29 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
Seajs源码详解分析
Apr 02 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 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
各种战术和打法的原创者
2020/03/04 星际争霸
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
php 静态化实现代码
2009/03/20 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
浅谈PHP进程管理
2019/03/08 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
javascript 闭包详解
2015/02/15 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Django如何配置mysql数据库
2018/05/04 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Python之Sklearn使用入门教程
2021/02/19 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
《风筝》教学反思
2014/04/10 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
Apache自带的ab压力测试工具的实现
2022/07/23 Servers