webentwicklung-frage-antwort-db.com.de

ES6 `fetch ist undefiniert '

Ich baue eine Site mit ES6 und Babel.

In einer Skriptdatei muss ich einen Ajax-Aufruf an einen Dienst auf dem Server durchführen. Dafür mache ich so:

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

In Google Chrome funktioniert das einwandfrei, aber es funktioniert nicht bei Firefox oder IE (Ich erhalte den Fehler fetch is undefined) .

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

Leider ändert es nichts, ich habe das gleiche Problem. Irgendeine Hilfe?

38
Pablo

Sie müssen das Modul "isomorphic-fetch" zu Ihrer "package.json" hinzufügen und diese dann importieren.

npm install --save isomorphic-fetch es6-promise

Dann in deinem Code

import "isomorphic-fetch"

Siehe https://www.npmjs.com/package/isomorphic-fetch

67
Kieran Johnson

Ich werde die beiden folgenden CDs so verwenden:

<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>
11
Thomas

Babel-polyfill ( http://babeljs.io/#polyfill ) enthält derzeit keinen Abruf in der Polyfill. Ich dachte darüber nach, es hinzuzufügen.

Aber yeah kann https://github.com/github/fetch verwenden.

4
hzoo

Sie können das ProvidePlugin von Webpack auch mit den Paketen exports-loader und exports-loader verwenden, wie in this answer beschrieben. Dadurch müssen Sie nichts in Ihren Code importieren:

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

Zum Zeitpunkt des Schreibens gibt es ein Kompatibilitätsproblem mit der 3.0.0-Version von whatwg-fetch. Die Problemumgehung verwendet Folgendes:

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

Ich habe das letzte Nacht gerade durchgemacht. Am Ende war die Lösung ziemlich einfach, nachdem man alles Mögliche ausprobiert hatte:

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

wurden

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

TL; DR fetch (stuff) sollte window . Fetch (stuff) EDITDas hat bei Chrome funktioniert

1
Salvatore