之前写过一篇文章,是关于标准 fetch 的,文章地址:http://www.ptbird.cn/javascript-fetch.html,由于它还在实验阶段,因此浏览器支持很差。

github 给出了一个 polyfill 解决方案,语法上与标准 fetch 没有区别:

一、安装包使用

如果使用 npm 或者 yarn 使用 fetch,需要的包是:whatwg-fetch

关于 whatwg 这个组织:https://whatwg.org/

npm install whatwg-fetch --save
yarn add whatwg-fetch

二、直接使用 js 文件

如果在其他非使用构建工具的项目中也用 whatwg-fetch ,则可以使用下面的代码创建一个 fetch.js

当然,需要用到 Promise 的 polyfill ,fetch 推荐使用的是:

三、试用

我使用这两个 polyfill 在IE 上试了试:

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@7/dist/polyfill.min.js"></script>
    <script src="./fetch.js"></script>
</head>

<body>
    <div id="container"></div>
</body>
<script>
    fetch('./test.html').then(function (res) { return res.text() })
        .then(function (val) { document.getElementById("container").innerHTML = val });
</script>
</html>

最终 IE9+ 没有任何问题,但是 IE8 出现了问题:

3.jpg

因为 Promise 的 polyfill 使用了 isArray,因此出现了问题。

当然 babel-polyfill 也是在 polyfill 出现了问题。