Question

我正在使用ES6和Babel建立一个网站。

在脚本文件中，我需要对服务器上的服务进行ajax调用。为此，我这样做：

fetch('url').then(
    response => response.json()
).then(
    supervisoryItems => doSomething(supervisoryItems)
)

在谷歌浏览器中，这很好用，但它不适用于Firefox或IE（我收到错误fetch is undefined）。在Google上搜索我发现这应该解决它：

import promise from 'es6-promise'
promise.polyfill()

可悲的是，它没有改变任何东西，我有同样的问题。有什么帮助吗？

Answer 1

您需要将'isomorphic-fetch'模块添加到'package.json'，然后导入它。

npm install --save isomorphic-fetch es6-promise

然后在你的代码中

import "isomorphic-fetch"

请参阅https://www.npmjs.com/package/isomorphic-fetch

Answer 2

我将使用以下两个cdn：

<script src="//cdn.jsdelivr.net/bluebird/3.5.0/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>

Answer 3

Babel-polyfill（http://babeljs.io/#polyfill）目前不包含在polyfill中的提取。我想加入它。

但是可以使用https://github.com/github/fetch

Answer 4

昨晚刚过去了。最后，在尝试了各种各样的事情之后，解决方案非常简单：

fetch('url').then(
response => response.json()
).then(
supervisoryItem => doSomething(supervisoryItem)
)

成了

window.fetch('url').then(
response => response.json()
).then(
supervisoryItem => doSomething(supervisoryItem)
)

TL; DR fetch（stuff）应该是 window .fetch（stuff）编辑这适用于我的Chrome

Answer 5

您还可以将Webpack的ProvidePlugin与imports-loader和exports-loader软件包一起使用，如this answer中所述，这样就无需在代码中导入任何内容：

config.plugins = [
    new webpack.ProvidePlugin({
      'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
    })
];

在撰写本文时，whatwg-fetch的3.0.0版本存在兼容性问题。解决方法是使用以下方法：

new webpack.ProvidePlugin({
    fetch: 'exports-loader?self.fetch!whatwg-fetch/dist/fetch.umd'
})

Answer 6

Javascript中添加的每个新功能都具有浏览器支持。您可以在https://caniuse.com/#feat=fetch

上看到浏览器支持

按照以下2个步骤在IE11上使用抓取

第1步：安装3个软件包

npm i whatwg-fetch @babel/polyfill es6-promise --save

@ babel / polyfill-在babel中使用polyfill

whatwg-fetch-包括提取功能

es6-promise-提取polyfill包含诺言，而IE11也不支持

步骤2：在webpack.config中添加入口点

条目：[“ whatwg-fetch”，“ @ babel / polyfill”，“ ./src/js/index.js”]

require("es6-promise").polyfill();

const config = {
  entry: [ "whatwg-fetch", "@babel/polyfill", "./src/js/index.js"],
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules : [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

module.exports = config;

Answer 7

我更喜欢使用isomorphic-unfetch而不是isomorphic-fetch，因为它可以像ponyfill而不是polyfill一样工作。

区别在于它不会影响其余的代码，并且对您具有的依赖项更加透明。

Answer 8

Window.fetch或fetch相同...从技术上讲，fetch（）是Window对象的全局方法

ES6`fetch未定义

8 个答案: