IT技术 - 在 React 中获取 polyfill 在 IE 11 中不能完全工作 - 吾爱随笔录

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

IT技术 javascript reactjs fetch internet-explorer-11

2021-05-21 14:37:30

这个 fetch 在 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 填充我的Promise。我正在使用 webpack 和 babel 来编译 js。

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

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

4个回答

看着isomorphic-fetch，包只是各种各样的元包，进口，出口或者whatwg-fetch还是node-fetch取决于你是否在浏览器或节点上下文。

我认为您的问题是默认情况下它将使用节点版本（请参阅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'
]

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

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

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

您需要包含以下文件，以便 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 可用。

这是官方的 github fetch.js polyfill 页面

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

其它你可能感兴趣的问题

上一篇添加灯丝传感器下一篇如何将多个 actionCreators 包装成一个 props？