fetch详解

HTML 专栏收录该内容
11 篇文章 0 订阅

在 JS 中使用 fetch 更加高效地进行网络请求

在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用。
我的源博客地址:http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/
免费的高质量软件开发视频教程 https://devopen.club/
软件开发每日头条文章 https://techfoco.com/

在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。
现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的 Ionic 和 React Native,都可以使用 fetch 进行完美的网络请求。

1. fetch 初体验

在 Chrome 浏览器中已经全局支持了 fetch 函数,打开调试工具,在 Console 中可以进行初体验。
先不考虑跨域请求的使用方法,我们先请求同域的资源,如在我的博客页面中,打开 Console 进行如下请求。
我的源博客地址:http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/
此测试操作需要在我博客中打开控制台测试,因为会有跨域的问题。

{% codeblock lang:js%}
fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})
{% endcodeblock %}

返回的数据:

截图

这样就很快速地完成了一次网络请求,我们发现返回的数据也比之前的 XMLHttpRequest 返回的数据丰富、易用的多。

2. 关于 fetch 标准概览

虽然 fetch 还不是作为一个稳定的标准发布,但是在其一直迭代更新的 标准描述 中,我们发现已经包含了很多的好东西。
fetch 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容,如 HTTP Method,HTTP Headers,Request,Response。

3. fetch 的使用

3.1 兼容浏览器的处理

可以通过下面的语句处理浏览器兼容的问题。

{% codeblock lang:js%}
if(self.fetch) {
// 使用 fetch 框架处理
} else {
// 使用 XMLHttpRequest 或者其他封装框架处理
}
{% endcodeblock %}

3.2 一般构造请求的方法

使用 fetch 的构造函数请求数据后,返回一个 Promise 对象,处理即可。
{% codeblock lang:js%}
fetch("http://blog.parryqiu.com")
.then(function(response){
// do something...
})
{% endcodeblock %}

3.3 fetch 构成函数的其他选项

我们可以将与 HTTP Headers 兼容的格式加入到请求的头中,如每次 API 的请求我们想不受缓存的影响,那么可以像下面这样请求:

{% codeblock lang:js%}
fetch("http://blog.parryqiu.com", {
headers: {
'Cache-Control': 'no-cache'
}
})
.then(function(response){
// do something...
})
{% endcodeblock %}

具体的可选参数可以查看 这里
如我们还可以这样使用,添加了更多的头部参数:
{% codeblock lang:js%}
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

var myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
};

fetch("http://blog.parryqiu.com", myInit)
.then(function(response){
// do something...
})
{% endcodeblock %}

3.4 返回的数据结构

在请求后的 Response 中,具体的定义在 这里
常用的有:

  • Response.status 也就是 StatusCode,如成功就是 200
  • Response.statusText 是 StatusCode 的描述文本,如成功就是 OK
  • Response.ok 一个 Boolean 类型的值,判断是否正常返回,也就是 StatusCode 为 200-299

做如下请求:
{% codeblock lang:js%}
fetch("http://blog.parryqiu.com")
.then(function(response){
console.log(response.status);
console.log(response.statusText);
console.log(response.ok);
})
{% endcodeblock %}

返回的数据:

截图

3.5 Body 参数

因为在 Request 和 Response 中都包含 Body 的实现,所以包含以下类型:

  • ArrayBuffer
  • ArrayBufferView (Uint8Array and friends)
  • Blob/File
  • string
  • URLSearchParams
  • FormData

在 fetch 中实现了对应的方法,并返回的都是 Promise 类型。

这样处理返回的数据类型就会变的特别地方便,如处理 json 格式的数据:
{% codeblock lang:js%}
var myRequest = new Request('http://api.com/products.json');

fetch(myRequest).then(function(response) {
return response.json().then(function(json) {
for(i = 0; i < json.products.length; i++) {
var name = json.products[i].Name;
var price = json.products[i].Price;
// do something more...
}
});
});
{% endcodeblock %}

4. 浏览器兼容

目前项目给出的浏览器支持如下图,如果需要兼容低版本浏览器,那么可以通过上面介绍的浏览器兼容处理办法解决此问题,不过相信很快就不需要考虑兼容问题了,在 Hybrid App 开发中使用基本没有问题,因为基本都是基于 Node.js 进行开发的。
有朋友提出兼容性问题的严谨性,其实通过 JS polyfill,已经可以获得很好的支持。

截图

  • 如使用 fetch-ie8 可以获得如下支持。

截图



由于 Fetch API 是基于 Promise 设计,有必要先学习一下 Promise,推荐阅读 MDN Promise 教程。旧浏览器不支持 Promise,需要使用 polyfill es6-promise

本文不是 Fetch API 科普贴,其实是讲异步处理和 Promise 的。Fetch API 很简单,看文档很快就学会了。推荐 MDN Fetch 教程 和 万能的WHATWG Fetch 规范

Why Fetch

XMLHttpRequest 是一个设计粗糙的 API,不符合关注分离(Separation of Concerns)的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。

Fetch 的出现就是为了解决 XHR 的问题,拿例子说明:

使用 XHR 发送一个 json 请求一般是这样:

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

使用 Fetch 后,顿时看起来好一点

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

使用 ES6 的 箭头函数 后:

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

现在看起来好很多了,但这种 Promise 的写法还是有 Callback 的影子,而且 promise 使用 catch 方法来进行错误处理的方式有点奇怪。不用急,下面使用 async/await 来做最终优化:

注:async/await 是非常新的 API,属于 ES7,目前尚在 Stage 1(提议) 阶段,这是它的完整规范。使用 Babel 开启 runtime 模式后可以把 async/await 无痛编译成 ES5 代码。也可以直接使用 regenerator 来编译到 ES5。

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}
// 注:这段代码如果想运行,外面需要包一个 async function

duang~~ 的一声,使用 await 后,写异步代码就像写同步代码一样爽await 后面可以跟 Promise 对象,表示等待 Promise resolve() 才会继续向下执行,如果 Promise 被 reject() 或抛出异常则会被外面的 try...catch 捕获。

await/async,generator/yield 可以粗略地认为是 Promise 的语法糖(其实功能上也有增强)。因此它们可以和 Fetch 完美搭配使用。这也是使用标准 Promise 一大好处。最近也把项目中使用第三方 Promise 库的代码全部转成标准 Promise,为以后全面使用 async/await 做准备。

另外,Fetch 也很适合做现在流行的同构应用,有人基于 Fetch 的语法,在 Node 端基于 http 库实现了 node-fetch,又有人封装了用于同构应用的 isomorphic-fetch

注:同构(isomorphic/universal)就是使前后端运行同一套代码的意思,后端一般是指 NodeJS 环境。

总结一下,Fetch 优点主要有:

  1. 语法简洁,更加语义化
  2. 基于标准 Promise 实现,支持 async/await
  3. 同构方便,使用 isomorphic-fetch

Fetch 启用方法

下面是重点↓↓↓

先看一下 Fetch 原生支持率:


浏览器对 Fetch 支持率

原生支持率并不高,幸运的是,引入下面这些 polyfill 后可以完美支持 IE8+ :

  1. 由于 IE8 是 ES3,需要引入 ES5 的 polyfill: es5-shim, es5-sham
  2. 引入 Promise 的 polyfill: es6-promise
  3. 引入 fetch 探测库:fetch-detector
  4. 引入 fetch 的 polyfill: fetch-ie8
  5. 可选:如果你还使用了 jsonp,引入 fetch-jsonp
  6. 可选:开启 Babel 的 runtime 模式,现在就使用 async/await

Fetch polyfill 的基本原理是探测是否存在 window.fetch 方法,如果没有则用 XHR 实现。这也是 github/fetch 的做法,但是有些浏览器(Chrome 45)原生支持 Fetch,但响应中有中文时会乱码,老外又不太关心这种问题,所以我自己才封装了 fetch-detectorfetch-ie8 只在浏览器稳定支持 Fetch 情况下才使用原生 Fetch。这些库现在每天有几千万个请求都在使用,绝对靠谱

终于,引用了这一堆 polyfill 后,可以愉快地使用 Fetch 了。但要小心,下面有坑:

Fetch 常见坑

  • Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials: 'include'})
  • 服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。

竟然没有提到 IE,这实在太不科学了,现在来详细说下 IE

IE 使用策略

所有版本的 IE 均不支持原生 Fetch,fetch-ie8 会自动使用 XHR 做 polyfill。但在跨域时有个问题需要处理。

IE8, 9 的 XHR 不支持 CORS 跨域,虽然提供 XDomainRequest,但这个东西就是玩具,不支持传 Cookie!如果接口需要权限验证,还是乖乖地使用 jsonp 吧,推荐使用 fetch-jsonp。如果有问题直接提 issue,我会第一时间解决。

标准 Promise 的不足

由于 Fetch 是典型的异步场景,所以大部分遇到的问题不是 Fetch 的,其实是 Promise 的。ES6 的 Promise 是基于 Promises/A+ 标准,为了保持简单简洁,只提供极简的几个 API。如果你用过一些牛 X 的异步库,如 jQuery(不要笑) 、Q.js 或者 RSVP.js,可能会感觉 Promise 功能太少了。

没有 Deferred

Deferred 可以在创建 Promise 时可以减少一层嵌套,还有就是跨方法使用时很方便。
ECMAScript 11 年就有过 Deferred 提案,但后来没被接受。其实用 Promise 不到十行代码就能实现 Deferred:es6-deferred。现在有了 async/await,generator/yield 后,deferred 就没有使用价值了。

没有获取状态方法:isRejected,isResolved

标准 Promise 没有提供获取当前状态 rejected 或者 resolved 的方法。只允许外部传入成功或失败后的回调。我认为这其实是优点,这是一种声明式的接口,更简单。

缺少其它一些方法:always,progress,finally

always 可以通过在 then 和 catch 里重复调用方法实现。finally 也类似。progress 这种进度通知的功能还没有用过,暂不知道如何替代。

最后

Fetch 替换 XHR 只是时间问题,现在看到国外很多新的库都默认使用了 Fetch。

最后再做一个大胆预测:由于 async/await 这类新异步语法的出现,第三方的 Promise 类库会逐渐被标准 Promise 替代,使用 polyfill 是现在比较明智的做法。



作者:Cam
链接:http://www.jianshu.com/p/THLARe
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2
    点赞
  • 1
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值