React Native网络编程之Fetch

Posted Lin Jin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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-downgraderoriginorigin-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 之 网络请求 fetch

稀饭react native 实战系列教程之影片数据获取并解析

react-native-easy-app 详解与使用之 fetch

react-native-easy-app 详解与使用之 fetch

react-native-fast-app 详解与使用之 fetch

Android上的React Native Fetch返回网络请求失败