React Native网络编程之Fetch
目录
1.前言
2.什么是Fetch
3.最简单的应用
4.支持的请求参数
- 4.1. 参数详讲
- 4.2. 示例
5.请求错误与异常处理
1. 前言
网络请求是开发APP中不可或缺的一部分,比如最基本的获取用户订单数据/获取商品数据/提交表单到服务器等等都离不开网络请求,那么在RN中是如何进行网络请求的呢?
2. 什么是Fetch
Fetch API提供了一个JS接口,用于进行网络操作,例如请求和响应。它还提供了一个全局fetch方法,该方法提供了一种简单,合理的方式来跨网络异步获取数据。
React Native 引入了Fetch,我们可以在RN中使用全局的fetch()方法进行网络请求,并且不需要自己做额外的导入。
对于XMLHttpRequest,Fetch可以与之相媲美,并且比之提供了更加强大以及灵活的特性,下面将会一一阐述,熟悉XMLHttpRequest的朋友可以一边学习下面的知识,一边进行二者之间的关联。
JS通过XMLHttpRequest(XHR)来执行异步请求,这个方式已经存在了很长一段时间了。虽然说它非常有用,但在一些场景,它并不是最好的解决方案。比如它在设计上不符合职责分离的原则,将输入/输出和用事件来追踪状态混杂在一个对象当中。而且,基于这种事件的模型,与es6中的Promise不太搭。
有一点需要注意的是,fetch与jQuery.ajax()主要存在以下两种不同,请牢记:
- 当接收到一个代表错误的HTTP状态码时,从fetch()返回的Promise不会被标记为reject,即使该HTTP响应的状态码是404或者500。相反,它会将Promise状态标记为resolve(但是会将resolve的返回值的ok设置为false),仅当网络故障或者是请求被阻止时,才会标记为reject。
- 默认情况下,fetch不会从服务端发送或接收任何cookies,如果站点依赖于用户session,则会导致未经认证的请求(如果要发送cookies,必须credentials选项)
3. 最简单的应用
let url = `http://api.github.com/search/repositories?q=${this.searchKey}`;
fetch(url)
.then(response => response.text()) // 将response中的data转成string
.then(responseText => {
console.log(responseText);
})
.catch(error => {
console.log(error);
})
这里我们通过网络获取一个JSON文件,并将其打印到控制台中。最简单的用法就是只提供一个参数用来指明想fetch到的资源路径,然后返回一个包含响应结果的promise。
当然它只是一个HTTP响应,而不是真的JSON或者String。为了获取String的内容,我们还需要使用text()方法来将response中的data转成String。
4. 支持的请求参数
Promise fetch(input, init);
4.1 参数
- input: 定义要获取的资源,这可能是:
- 一个String字符串,包含要获取资源的URL
- 一个Request对象
- init: 【可选】 一个配置项对象,包括所有对请求的设置。可选的参数如下:
- method: 请求使用的方法,如GET, POST, PUT, DELETE等
- headers: 请求的头信息,形式为Headers的对象或包含ByteString值的对象字面量。
- body: 请求的body信息:可能是一个Blob、BufferSource、FormData、URLSearchParams或者String对象。注意GET或HEAD方法的请求不能包含body信息
- mode: 请求的模式,如cors、no-cors或者same-origin。
- credentials: 请求的credentials,如omit、same-origin或者include。为了在当前域名内自动发送cookie,必须提供这个选项,从chrome50开始,这个属性也可以接受FederatedCredential实例或是一个PasswordCredential实例。
- cache: 请求的cacheMoshi :default、no-store、reload、no-cache、force-cache或者only-if-cached。
- redirect: 可用的redirect模式:follow(自动重定向),error(如果产生重定向将自动终止并且抛出一个错误)或者manual(手动处理重定向),在chrome47之前的默认值是follow,从47后开始manual。
- referrer: 一个USVString可以是no-referrer、client或是一个URL、默认是client。
- referrerPolicy: 指定referrer HTTP header的值,可选值【no-referrer、no-referrer-when-downgrader\origin\origin-when-cross-origin、unsafe-url】。
- integrity: 包括请求的subresource integrity值.
4.2 示例
fetch(url, {
body: JSON.stringify(data), // 数据类型要和 ‘Content-Type’ header 保持一致
cache: 'no-cache', // default, no-cache, reload, force-cache, 或者 only-if-cached
credentials: 'same-origin', // emit,same-origin, include
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
'method': 'POST', // GET,POST, PUT,DELETE
'mode': 'cors', // no-cors, cors, same-origin
'redirect': 'follow', // manual, follow,error
'referrer': 'no-referrer', // client或no-referrer
})
.then(response => response.json()) // 将数据解析成json
5. 请求错误及异常处理
如果遇到网络故障,fetch将会调用reject,带上一个TypeError对象。
需要注意的是: 一次请求没有调用reject并不代表请求就一定成功了,通常情况下我们需要在resolved的情况,在判断Response.ok是否为true,如下:
let url = `http://api.github.com/search/repositories?q=${this.searchKey}`;
fetch(url)
.then(response => {
if (response.ok) {
return response.text();
}
throw new Error('Network response was not ok.');
})
.then(responseText => {
console.log(responseText);
})
.catch(error => {
console.log(error.toString());
})
React Native网络编程之Fetch的更多相关文章
- React Native 网络请求封装:使用Promise封装fetch请求
最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...
- 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 网络编程之socket
网络编程之socket socket:在网络编程中的一个基本组件,也称套接字. 一个套接字就是socket模块中的socket类的一个实例. 套接字包括两个: 服务器套接字和客户机套接字 套接字的实例 ...
- [深入浅出WP8.1(Runtime)]网络编程之HttpClient类
12.2 网络编程之HttpClient类 除了可以使用HttpWebRequest类来实现HTTP网络请求之外,我们还可以使用HttpClient类来实现.对于基本的请求操作,HttpClient类 ...
- java网络编程之TCP通讯
java中的网络编程之TCP协议的详细介绍,以及如何使用,同时我在下面举2例说明如何搭配IO流进行操作, /* *TCP *建立连接,形成传输数据的通道: *在连接中进行大数据量传输: *通过三次握手 ...
- react native 网络get请求方式参数不可为undefined或null
react native 网络get请求方式参数不可为undefined(为空的话默认变为)或null 错误写法: export function addToCartAction(isRefreshi ...
- python3网络编程之socketserver
本节主要是讲解python3网络编程之socketserver,在上一节中我们讲到了socket.由于socket无法支持多用户和多并发,于是就有了socket server. socket serv ...
- 网络编程之UDP编程
网络编程之UDP编程 UDP协议是一种不可靠的网络协议,它在通信的2端各建立一个Socket,但是这个Socket之间并没有虚拟链路,这2个Socket只是发送和接受数据的对象,Java提供了Data ...
- 网络编程之TCP编程
网络编程之TCP编程 前面已经介绍过关于TCP协议的东西,这里不做赘述.Java对于基于TCP协议的网络通信提供了良好的封装,Java使用socket对象来代表两端的通信窗口,并通过Socket产生I ...
随机推荐
- openwrt的sysupgrade和factory固件的区别
openwrt的固件一般分两种类型:factory原厂固件.sysupgrade固件 factory多了一些验证的东西,用于在原厂固件的基础上进行升级. 普通家用路由一般不是openwrt固件,如果要 ...
- Java入门系列(二)Java常用关键字
53个关键字 在JAVA中目前一共有53个关键字:其中由51+2个保留字=53个关键字 访问控制 private protected public default 类.方法和 ...
- 20155207 2016-2017-2 《Java程序设计》第七周学习总结
20155207 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 第13章 时间与日期 13.1 认识时间与日期 13.1.1 时间的度量 格林威治时间(GM ...
- HDU 4545 (模拟) 魔法串
题目链接 Problem Description 小明和他的好朋友小西在玩一个新的游戏,由小西给出一个由小写字母构成的字符串,小明给出另一个比小西更长的字符串,也由小写字母组成,如果能通过魔法转换使小 ...
- 【译】第八篇 Integration Services:高级工作流管理
本篇文章是Integration Services系列的第八篇,详细内容请参考原文. 简介在前面两篇文章,我们创建了一个新的SSIS包,学习了SSIS中的脚本任务和优先约束,并检查包的MaxConcu ...
- 【译】第三篇 Integration Services:增量加载-Adding Rows
本篇文章是Integration Services系列的第三篇,详细内容请参考原文. 增量加载是什么增量加载仅加载与先前加载差异的.差异包括:->新增的行->更新的行->删除的行通过 ...
- 怎么样通过编写Python小程序来统计测试脚本的关键字
怎么样通过编写Python小程序来统计测试脚本的关键字 通常自动化测试项目到了一定的程序,编写的测试代码自然就会很多,如果很早已经编写的测试脚本现在某些基础函数.业务函数需要修改,那么势必要找出那些引 ...
- 20165227 实验二《Java面向对象程序设计》实验报告
2017-2018-4 20165227实验二<Java面向对象程序设计>实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉 ...
- 对接微信支付使用HMAC-SHA256使用签名算法实现方式
最近做微信押金支付对接,很多坑,心累!这里提醒一下各位: 首先,确保自己商户号进了白名单,没有需要联系客服,否则接口是调不通的,会一直提示参数错误 其次,确保接口文档是最新的,最好去官网去看,否则可能 ...
- 新浪的wap网站,发现原来我们的head存在着这样的差异
前一段时间一直被wap网站的自适应困惑…… 仔细研究了一下新浪的wap网站,发现原来我们的head存在着这样的差异…… <%@page contentType="text/html;c ...