大家好,由于最近比较忙,直到今天我才有时间写第二篇关于fetch的介绍。今天我将继续为大家介绍Fetch API,现在我先大概列出我们接下来会看到的内容:
response
对象;- 自定义
request()
对象; fetch
的异常处理;fetch
的兼容实现方案;
一.Response对象
Fetch API 的Response接口呈现了对一次请求的响应数据,Response实例是在fetch()处理完promises之后返回的。
正如上述MDN所说,Response实例是在fetch处理完promise后才返回的,所以我们在一般想拿到数据都会做类似以下处理(我以处理json数据为例):
fetch(URL)
.then(res => res.json())
.then(res => {
console.log("data", res)})
.catch(err => {
console.log("error", err)})
通常情况下,我们会使用到response对象
的以下属性:
- Response.status — 整数(默认值为200) 为response的状态码.
- Response.statusText — 字符串(默认值为"OK"),该值与HTTP状态码消息对应.
- Response.ok — 如上所示,该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值.
记住Response.ok
这个参数,后面在fetch的异常处理中我们会用到它。
二.自定义Request()对象
除了传给 fetch() 一个资源的地址,你还可以通过使用 Request() 构造函数来创建一个 request 对象,然后再作为参数传给fetch()。
语法如下:
var myRequest = new Request(input, init);
参数解释:
1.input:定义你想要fetch的资源。可以是下面两者之一:
- 一个直接包含你希望fetch的资源的URL的
USVString
1. - 一个
Request
对象.
2.init(可选)
method
: 请求的方法,例如:GET, POST。headers
: 任何你想加到请求中的头,其被放在Headers对象或内部值为ByteString 的对象字面量中。body
: 任何你想加到请求中的body,可以是Blob, BufferSource, FormData, URLSearchParams, 或 USVString对象。注意GET 和 HEAD请求没有body。mode
: 请求的模式, 比如 cors, no-cors, same-origin, 或 navigate。默认值应该为 cors。但在Chrome中,Chrome47之前的版本默认值为no-cors,自Chrome47起,默认值为same-origin。credentials
: 想要在请求中使用的credentials::omit,same-origin,或include。默认值应该为omit。但在Chrome中,Chrome 47 之前的版本默认值为 same-origin ,自Chrome 47起,默认值为include。cache
: 请求中想要使用的cache moderedirect
: 对重定向处理的模式: follow, error, or manual。在Chrome中,Chrome 47 之前的版本默认值为 manual ,自Chrome 47起,默认值为follow。referrer
: 一个指定了no-referrer,client,或一个URL的USVString。默认值是client.integrity
: 包括请求的subresourceintegrity值(eg:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
3.实例
var myHeaders = new Headers();
var myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
var myRequest = new Request('flowers.jpg', myInit);
fetch(myRequest).then(function(response) {
return response.blob();
}).then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
上面的实例比较简单易懂,需要注意的是这个地方,cache: 'default'
2
三.Fetch的异常捕捉
自XHR起,封装一个详尽的错误捕捉机制一直都是个令人头疼的事儿,当然,早就有人把这个头疼的事给做了,古代有jquery ajax,现代也有类似axios这之类抛出promise的库。对fetch来说,它是一个足够底层的原生模块,足够底层,也就意味着更大的自由,以及更繁琐的封装过程。
我们一般情况下是这么创建一个fetch请求的(我以最普遍的json数据流为例):
fetch