React Native网络编程之Fetch

Posted 2021-02-14 Lin Jin

目录

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

?