在 React 中获取 polyfill 在 IE 11 中不完全工作答案

【问题标题】：Fetch polyfill in React not completely working in IE 11在 React 中获取 polyfill 在 IE 11 中不完全工作
【发布时间】：2016-12-13 16:27:21
【问题描述】：

此提取在 Chrome 中运行良好：

fetch( this.props.url, {credentials:'same-origin'})
    .then( (data) => data.json() )
    .then( (data) => {
      if( data.length > 0) {
          // do some stuff
      } else {
          console.log('No data Richard of the Beard of the Lewis.');
      }
});

我正在使用 isomorphic-fetch，并且我正在使用 promise-polyfill 填充我的承诺。我正在使用 webpack 和 babel 来编译 js。

当我在 IE11 中执行此代码时，会执行初始数据获取，并且我的响应确实包含请求的数据，但我的 then 中似乎根本没有执行（我在几个不同的地方应用了 console.logs 来查看如果他们在提取完成后完全抽搐......不行）。我没有控制台错误，所以我假设 IE11 对编译后的 js 语法感到满意。

有人知道我可以试试吗？我是否需要以更详细的方式重写我的 fetch 语句，以便 IE11 完全执行它？在这一点上，任何事情都有帮助！感谢您的任何意见。

【问题讨论】：

我已经在 IE11 中工作，但我使用的是 babel-polyfill 而不仅仅是 promise-polyfill。你可以试试:)
听起来 fetch 可以正常工作，但你的 Promise polyfill 不行。您是否根据文档在代码中的某处添加了“if (!window.Promise) { window.Promise = Promise; }”？ github.com/taylorhakes/promise-polyfill/blob/master/README.md
在 IE 11 上也适用于我

标签： javascript reactjs internet-explorer-11 isomorphic-fetch-api

【解决方案1】：

看看isomorphic-fetch，这个包只是一个元包，它可以根据你是在浏览器还是Node上下文中导入-导出whatwg-fetch或node-fetch。

我认为您的问题是它将默认使用节点版本（请参阅main entry in the package.json）。

作为一个 polyfill，它只是在非 IE 上被跳过，因为浏览器默认支持 fetch。在 IE11 上使用了 polyfill，但它是 Node 的 polyfill，在浏览器中不起作用。

您可以通过包含浏览器特定版本来强制 webpack 使用浏览器版本：

require('isomorphic-fetch/fetch-npm-browserify')

或

import 'isomorphic-fetch/fetch-npm-browserify'

或在 Webpack 配置中：

entry: [
    'isomorphic-fetch/fetch-npm-browserify',
    'app.js'
]

【讨论】：

【解决方案2】：

所以这就是我最终使用的对我有用的东西：

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

我尝试了另外两个被吹捧为神奇和 polyfill 的提取，但上面的组合最终让我能够在我的代码中找到 IE 不兼容的 REST。 :)

【讨论】：

【解决方案3】：

您需要包含以下文件才能使 fetch.js 在 IE 11+

中工作

'./node_modules/es6-promise/dist/es6-promise.auto.js'
'同构提取'

在运行 webpack 命令之前，您必须确保已在 node_modules 中安装了这些文件，运行以下命令：

npm install --save isomorphic-fetch es6-promise

然后把它放在 webpack 入口属性中：

  entry: [
    './node_modules/es6-promise/dist/es6-promise.auto.js',
    'isomorphic-fetch',
    'path for main file'
  ]

现在在您的终端/cmd 中键入 webpack 关键字，您应该在 dist 文件夹中有一个文件（如果您没有指定其他输出路径），其中包含可用的 polyfill。 p>

Here is the official github fetch.js polyfill page

【讨论】：

【解决方案4】：

我们需要在 IE 中添加一个用于 fetch 的 polyfill，请参考这个适合你的 polyfill https://github.com/github/fetch

【讨论】：