web-dev-qa-db-ja.com

ES6「フェッチは未定義」

ES6とBabelでサイトを構築しています。

スクリプトファイルで、サーバー上のサービスに対してajax呼び出しを行う必要があります。そのために私は次のようにしています：

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

Google Chromeではこれは問題なく機能しますが、FirefoxまたはIE（エラーfetch is undefinedが発生します）では機能しません。 Googleで検索すると、これで修正されるはずです。

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

悲しいことにそれは何も変えません、私は同じ問題を抱えています。助けがありますか？

javascriptecmascript-6babeljs
50
Pablo

「isomorphic-fetch」モジュールを「package.json」に追加してからインポートする必要があります。

npm install --save isomorphic-fetch es6-promise

その後、あなたのコードで

import "isomorphic-fetch"

https://www.npmjs.com/package/isomorphic-fetch を参照してください

83
Kieran Johnson

このように次の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>
13
Thomas

Babel-polyfill（ http://babeljs.io/#polyfill ）は現在、ポリフィルにフェッチを含みません。私はそれを追加することを考えていました。

しかし、ええ https://github.com/github/fetch

5
hzoo

this answer で説明されているように、Webpackの ProvidePlugin を imports-loader および exports-loader パッケージとともに使用することもできます。これにより、コードに何かをインポートする必要がなくなります。

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

執筆時点では、3.0.0バージョンのwhatwg-fetchとの互換性の問題があります。回避策は次を使用しています。

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

昨夜このまま通りました。最終的に、あらゆる種類のことを試した後、ソリューションは非常に簡単でした：

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）EDITである必要があります

1
Salvatore