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());
    })

?

原文地址:https://www.cnblogs.com/fe-linjin/p/10573592.html

时间: 2024-11-05 19:05:14

React Native网络编程之Fetch的相关文章

React Native 网络请求封装:使用Promise封装fetch请求

React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRequest 是一个设计粗糙的 API,不符合职责分离的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise 友好.而Fetch 的出现就是为了解决 XHR 的问题,所以ReactNative官方推荐使用Fetch API.http://blog.csdn.net/withings/article/details/71331726 fet

linux网络编程之shutdown() 与 close()函数详解

linux网络编程之shutdown() 与 close()函数详解 参考TCPIP网络编程和UNP: shutdown函数不能关闭套接字,只能关闭输入和输出流,然后发送EOF,假设套接字为A,那么这个函数会关闭所有和A相关的套接字,包括复制的:而close能直接关闭套接字. 1.close()函数 [cpp] view plain copy print? <span style="font-size:13px;">#include<unistd.h> int 

java网络编程之UDP实例

package Socket; import java.net.DatagramPacket; import java.net.InetAddress; public class Dgram { public static DatagramPacket toDatagram(String s, InetAddress destIA, int destPort) { byte[] buf = new byte[s.length() + 1]; s.getBytes(0, s.length(), b

java网络编程之TCP实例

Dgram类 package Socket; import java.net.DatagramPacket; import java.net.InetAddress; public class Dgram { public static DatagramPacket toDatagram(String s, InetAddress destIA, int destPort) { byte[] buf = new byte[s.length() + 1]; s.getBytes(0, s.leng

扯谈网络编程之Tcp SYN flood洪水攻击

简介 TCP协议要经过三次握手才能建立连接: (from wiki) 于是出现了对于握手过程进行的攻击.攻击者发送大量的FIN包,服务器回应(SYN+ACK)包,但是攻击者不回应ACK包,这样的话,服务器不知道(SYN+ACK)是否发送成功,默认情况下会重试5次(tcp_syn_retries).这样的话,对于服务器的内存,带宽都有很大的消耗.攻击者如果处于公网,可以伪造IP的话,对于服务器就很难根据IP来判断攻击者,给防护带来很大的困难. 攻与防 攻击者角度 从攻击者的角度来看,有两个地方可以

[深入浅出WP8.1(Runtime)]网络编程之HttpClient类

12.2 网络编程之HttpClient类 除了可以使用HttpWebRequest类来实现HTTP网络请求之外,我们还可以使用HttpClient类来实现.对于基本的请求操作,HttpClient类提供了一个简单的接口来处理最常见的任务,并为身份验证提供了适用于大多数方案的合理的默认设置.对于较为复杂的 HTTP 操作,更多的功能包括:执行常见操作(DELETE.GET.PUT 和 POST)的方法:获取.设置和删除 Cookie 的功能:支持常见的身份验证设置和模式:异步方法上提供的 HTT

黑马程序员——Java网络编程之UDP传输

网络编程 网络模型 通讯要素:InetAddress(对象):ip地址,网络中设备的标识,不可记忆,可用主机名,本地回环地址:127.0.0.1主机名localhost 端口号 传输协议:UDP,将数据的源及目的封装成数据包中,不需要建立连接,每个数据包的大小限制在64K内,无连接,是不可靠协议,不需要建立连接,速度快.力求速度,不求数据的准确性.比如聊天软件,网络会议. TCP:建立连接,形成传输数据的通道,在连接中进行大数据量传输,通过三次握手完成连接,是可靠协议,必须建立连接效率稍低. S

linux网络编程之TCP/IP基础篇(一)

从今天起,将会接触到网络编程,平台是linux,实现语言C语言,最后将会实现一个简易的miniftp服务器. 主要的内容安排为:linux网络编程之TCP/IP基础篇,SOCKET编程篇,进程间通信篇,线程篇,实战ftp篇. 1.ISO/OSI参考模型:open system interconnection开放系统互联模型是由OSI(international organization for standardization )国际标准化组织定义的网络分层模型,共七层. 各层的具体含义: 物理层

【转】JAVA网络编程之Socket用法

JAVA网络编程之Socket用法 分类: JAVA2012-08-24 15:56 710人阅读 评论(0) 收藏 举报 在客户/服务器通信模式中,客户端需要主动建立与服务器连接的Socket,服务器端收到客户端的连接请求,也会创建与客户端连接的Socket.Socket可以看做是通信连接两端的收发器,客户端和服务店都通过Socket来收发数据. 1.构造Socket public Socket() 通过系统默认类型的 SocketImpl 创建未连接套接字 public Socket(Str