5个适用于Fetch API的最佳JavaScript Polyfills

本文概述

• 5. Fetch Polyfill
• 4. Fetch ie8
• 3. Unfetch
• 2. Isomorphic Fetch
• 1. Github Fetch(whatwg)

众所周知, Fetch API比XMLHttpRequest更干净, 理论上更易于使用, 并且显然并非所有浏览器都提供该API。根据Google的说法：

主要区别在于Fetch API使用Promises, 从而实现了更简单, 更简洁的API, 避免了回调地狱, 并且必须记住XMLHttpRequest的复杂API。 [在fetch()简介中了解更多信息]

此API自Chrome 42起可用。该API的问题之一是, 它还使用了所有浏览器(承诺)都不支持的API, 因此除了Fetch polyfill之外, 你还需要使用polyfill以获得承诺(有关更多信息, 请参阅我们的5种最佳Promises Polyfills帖子)。如果你已经找到Promises API的polyfill, 那么你肯定会想知道哪种Fetch Polyfill是最好的。在本文中, 我们想与你分享5种API的Polyfills, 它们将在较旧的浏览器上为你提供对该API的支持。

5. Fetch Polyfill

RubyLouvre的fetch polyfill支持所有主流浏览器, 甚至IE6, IE7和IE8：

fetch('/users.json').then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json', json)
}).catch(function(ex) {
    console.log('parsing failed', ex)
});

Polyfill还需要文档中包含的Promises API的另一个polyfill。

4. Fetch ie8

此Polyfill是一个window.fetch支持IE8的JavaScript polyfill。此fork支持带有es5-shim, es5-sham和es6-promise的IE8。 Fetch API仍然很新, 并且在某些浏览器中不完全支持, 因此你可能需要检查浏览器版本以及是否存在window.fetch。在这种情况下, 可以设置window .__ disableNativeFetch = true以始终使用AJAX polyfill。提取功能支持任何HTTP方法：

fetch('/users.html').then(function(response) {
    return response.text()
}).then(function(body) {
    document.body.innerHTML = body
})

3. Unfetch

Unfetch是一款具有500b可读取功能的” barely-polyfill”, 具有以下功能, 由developerit开发：

• 微小：不到500字节的ES3压缩文件
• 最小：仅带有标题和text / json响应的fetch()
• 熟悉：完整API的子集
• 支持：支持IE8 +(当然, 假设Promise已填充)
• 独立：一个功能, 没有依赖关系
• 现代：用ES2015写成, 可移植到500b的老式JS中

尽管Unfetch的目标之一是提供一个熟悉的界面, 但其API可能与其他fetch polyfills / ponyfills不同。关键区别之一是, Unfetch专注于实现fetch()API, 同时为Fetch规范的其他部分(如Headers类或Response类)提供最少(尚未功能)的支持。

2. Isomorphic Fetch

同构提取是针对节点和Browserify的提取API的polyfill。构建在GitHub的WHATWG Fetch polyfill之上。

require('es6-promise').polyfill();
require('isomorphic-fetch');

fetch('//offline-news-api.herokuapp.com/stories').then(function(response) {
    if (response.status >= 400) {
        throw new Error("Bad response from server");
    }
    
    return response.json();
})
.then(function(stories) {
    console.log(stories);
});

1. Github Fetch(whatwg)

每个人都知道Github, 但是并不是每个人都知道Github在Github中有一个存储库(头脑爆炸)。 Github上最著名的存储库之一就是Polyfill for Fetch。该项目实现了标准Fetch规范的子集, 足以使fetch替代传统Web应用程序中XMLHttpRequest的大多数用法。它支持以下浏览器：

• 铬
• 火狐浏览器
• Safari 6.1+
• Internet Explorer 10+

在现代浏览器(例如Chrome, Firefox, Microsoft Edge和Safari)中, 它们包含window.fetch的本机实现, 因此, 此polyfill中的代码对这些浏览器没有任何影响。如果你认为在这些浏览器中如何实现window.fetch时遇到错误, 则应向该浏览器供应商提出问题, 而不是向该项目提出。你还需要针对旧版浏览器的Promise polyfill。

编码愉快！