web-dev-qa-db-fra.com

ES6 `fetch is undefined`

Je construis un site avec ES6 et Babel.

Dans un fichier de script, je dois effectuer un appel ajax vers un service sur le serveur. Pour ça je fais comme ça:

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

Dans Google Chrome, cela fonctionne très bien, mais cela ne fonctionne pas sous Firefox ou IE (je reçois l'erreur fetch is undefined) . Une recherche sur Google a révélé que cela devrait résoudre le problème:

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

Malheureusement, cela ne change rien, j'ai le même problème. De l'aide?

javascriptecmascript-6babeljs
38
Pablo

Vous devez ajouter le module 'isomorphic-fetch' à votre 'package.json', puis l'importer.

npm install --save isomorphic-fetch es6-promise

Puis dans votre code

import "isomorphic-fetch"

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

67
Kieran Johnson

Je vais utiliser les deux CDN suivants comme ceci:

<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 ) n'inclut pas pour le moment l'extraction dans le polyfill. Je pensais l'ajouter cependant.

Mais oui, vous pouvez utiliser https://github.com/github/fetch

4
hzoo

Vous pouvez également utiliser ProvidePlugin de Webpack avec les packages imports-loader et exports-loader comme décrit dans this answer , ce qui vous évite d'importer n'importe quoi dans votre code:

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

Au moment de la rédaction de ce document, il existe un problème de compatibilité avec la version 3.0.0 de whatwg-fetch. La solution de contournement utilise les éléments suivants:

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

Je viens de traverser cette nuit dernière. En fin de compte, après avoir essayé toutes sortes de choses, la solution était assez simple:

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

est devenu

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

TL; DR fetch (choses) devrait être window . Fetch (choses) EDITCela a fonctionné pour moi sur Chrome

1
Salvatore