目录
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