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

2022-01-20 00:00:00 reactjs fetch javascript internet-explorer-11

此提取在 Chrome 中运行良好:

This fetch works fine in 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.

I am using isomorphic-fetch, and I am polyfilling my promise with promise-polyfill. I'm using webpack and babel to compile the js.

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

When I execute this code in IE11, the initial fetch of data executes and my response does contain the requested data, but nothing within my then appears to execute at all (I've applied console.logs in several different places to see if they were twitching at all after the fetch completed...no go). I have no console errors, so I assume IE11 is happy enough with the compiled js' syntax.

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

Does anybody have a clue for me to try? Do I need to re-write my fetch statement in some more verbose way so that IE11 will execute it completely? Anything is helpful at this point! Thanks for any input.

推荐答案

看看isomorphic-fetch，包只是一个元包，它可以导入-导出whatwg-fetch 或 node-fetch 取决于您是在浏览器还是 Node 上下文中.

Looking at isomorphic-fetch, the package is just a meta-package of sorts that import-exports either whatwg-fetch or node-fetch depending on whether you are in a browser or Node context.

我认为您的问题是它将默认使用节点版本(请参阅 package.json 中的主要条目).

I think your issue is that it will use the node version by default (see the main entry in the package.json).

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

Being a polyfill, it is simply skipped on non-IE as the browsers support fetch by default. On IE11 the polyfill is used, but it's the Node polyfill which won't work in a browser.

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

You might be able to coerce webpack to use the browser version by including the browser specific version:

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

或

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

或在 Webpack 配置中:

or in Webpack config:

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

相关文章