React Native探索(五)使用fetch进行网络请求

前言

React Native可以使用多种方式来进行网络请求,比如fetch、XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLHttpRequest的产物,这一节我们就来学习fetch的基本用法。

1.get请求

fetch API是基于 Promise 设计的,因此了解Promise也是有必要的,推荐阅读MDN Promise教程 。

get请求访问淘宝IP库

我们先从最基础的get请求开始,get请求的地址为淘宝IP地址库,里面有访问接口的说明。请求代码如下所示。

其中method用于定义请求的方法,这里不用写method也可以,fetch默认的method就是GET。fetch方法会返回一个Promise对象,这个Promise对象中包含了响应数据response,也就是注释1处的response参数。在注释1处调用then方法将response打印在控制台Console中,then方法同样也会返回Promise对象,Promise对象可以进行链式调用,这样就可以通过多次调用then方法对响应数据进行处理。在注释2处通过catch方法来处理请求网络错误的情况。除了上面这一种写法,我们还可以使用Request,如下所示。

我们先创建了Request对象,并对它进行设置,最后交给fetch处理。为了验证fetch的get请求,需要添加触发get请求的代码逻辑,如下所示。

这里添加了一个TouchableHighlight,并定义了它的点击事件,一旦点击就会触发get方法请求网络。运行程序点击“get请求”,这时在控制台Console中就会显示回调的Response对象的数据,它包含了响应状态(status)、头部信息(headers)、请求的url(url)、返回的数据等信息。这次请求的响应状态status为200,返回的数据是JSON格式的,用Charles抓包来查看返回的JSON,如下图所示。

Response对象解析

Response对象中包含了多种属性:

  • status (number) : HTTP请求的响应状态行。
  • statusText (String) : 服务器返回的状态报告。
  • ok (boolean) :如果返回200表示请求成功,则为true。
  • headers (Headers) : 返回头部信息。
  • url (String) :请求的地址。

Response对象还提供了多种方法:

  • formData():返回一个带有FormData的Promise。
  • json() :返回一个带有JSON对象的Promise。
  • text():返回一个带有文本的Promise。
  • clone() :复制一份response。
  • error():返回一个与网络相关的错误。
  • redirect():返回了一个可以重定向至某URL的response。
  • arrayBuffer():返回一个带有ArrayBuffer的Promise。
  • blob() : 返回一个带有Blob的Promise。

接下来对返回的Response进行简单的数据处理,如下所示。

访问淘宝IP地址库会返回JSON数据,因此在注释1处调用response的json方法,将response转换成一个带有JSON对象的Promise,也就是注释2处的jsonData。最后取出jsonData中数据并展示在Alert中,这里data是一个对象,如果它是一个对象数组我们可以这样获取它的数据:

点击“get请求”,效果如下所示。

2.post请求

post请求的代码如下所示。

在注释1处将method改为POST,在注释2处添加请求的body。与get请求类似,这里也添加一个触发事件来进行post请求,当点击“post请求”时,查看Charles抓包的请求的信息,如下图所示。

可以看到请求数据是一个GSON字符串,因为淘宝IP库并不支持此类型的POST请求,所以不会返回我们需要的地理信息数据。

3.简单封装fetch

如果每次请求网络都要设定method、headers、body等数据,同时还要多次调用then方法对返回数据进行处理,显然很麻烦,下面就对上面例子中的get和post请求做一个简单的封装。 首先创建一个FetchUtils.js,代码如下所示。

在FetchUtils中定义了send方法,对GET和POST请求做了区分处理,并在注释1处通过callback将响应数据response回调给调用者。 最后调用FetchUtils的send方法,分别进行GET和POST请求:

参考资料 Fetch API fetch-issues-274 MDN Promise教程 ReactNative网络fetch数据并展示在listview中 React Native中的网络请求fetch和简单封装 在 JS 中使用 fetch 更加高效地进行网络请求 Using Fetch

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2017-06-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的Python

Python文件处理 - 专题笔记文件简介文件基础操作文件属性及OS模块使用文件练习

任何语言都离不开对文件的操作,Python语言是如何来操作和管理文件的。掌握文件的基本概念、基本操作,了解文件属性、 linux 系统的文件管理机制及os模块对...

3866
来自专栏Java大联盟

Java面试手册:线程专题 ①

1292
来自专栏我的博客

WorkMan手册笔记-定时器类

一、定时执行某个函数或者类方法 int \Workerman\Lib\Timer::add(float $time_interval, callable $ca...

3757
来自专栏决胜机器学习

《Redis设计与实现》读书笔记(二十八) ——Redis集群节点结构与槽分配

《Redis设计与实现》读书笔记(二十八) ——Redis集群节点结构与槽分配 (原创内容,转载请注明来源,谢谢) 一、概述 redis集群是...

4466
来自专栏码生

django 学习笔记三

拦截到url 后,通过拦截到的URL和 request 做一些不同的响应(response)

1072
来自专栏FreeBuf

如何进行Linux平台共享库替换

*本文原创作者:gaearrow,本文属FreeBuf原创奖励计划,未经许可禁止转载 。 共享库基础知识 程序由源代码变成可执行文件,一般可以分解为四个步骤...

2778
来自专栏技巅

Glusterfs之rpc模块源码分析(中)之Glusterfs的rpc模块实现(1)

1793
来自专栏社区的朋友们

django 初始化默认数据的一个方法

经常可能会有的一个需求就是,一个表中会有一些默认数据,这些数据未来是可以通过管理端来配置的。所以数据库在被建立之后,会有一些默认数据被插入表中。

2.5K3
来自专栏Python专栏

Python | 四种运行其他程序的黑科技

在Python中,可以方便地使用os模块来运行其他脚本或者程序,这样就可以在脚本中直接使用其他脚本或程序提供的功能,而不必再次编写实现该功能的代码。

2502
来自专栏python学习路

八、线程和进程 什么是线程(thread)?什么是进程(process)? 线程和进程的区别?Python GIL(Global Interpreter Lock)全局解释器锁

什么是线程(thread)? 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流,一...

4657

扫码关注云+社区

领取腾讯云代金券