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