react - javascript fetch syntax

ES6 `fetch no está definido`

Question

Estoy construyendo un sitio con ES6 y Babel.

En un archivo de script, necesito hacer una llamada ajax a un servicio en el servidor. Para eso estoy haciendo así:

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

En Google Chrome esto funciona bien, pero no funciona en Firefox o IE (obtengo que la fetch is undefined error fetch is undefined ). Al buscar en Google encontré que esto debería solucionarlo:

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

Lamentablemente no cambia nada, tengo el mismo problema. ¿Alguna ayuda?

Answer 1

Acabo de pasar por esto anoche. Al final, después de probar todo tipo de cosas, la solución fue bastante simple:

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

convirtió

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

TL; DR fetch (cosas) debe ser window .fetch (cosas) EDITAR Esto funcionó para mí en Chrome

Answer 2

Babel-polyfill ( http://babeljs.io/#polyfill ) actualmente no incluye fetch en el polyfill. Sin embargo, estaba pensando en agregarlo.

Pero sí, puede usar https://github.com/github/fetch

Answer 3

Debe agregar el módulo ''isomorphic-fetch'' a su ''package.json'' y luego importarlo.

npm install --save isomorphic-fetch es6-promise

Luego en tu código

import "isomorphic-fetch"

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

Answer 4

Hay compatibilidad con el navegador para cada nueva funcionalidad agregada en Javascript. Puede ver el soporte del navegador en https://caniuse.com/#feat=fetch

Siga los siguientes 2 pasos para usar fetch en IE11

Paso 1: instala 3 paquetes

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

@ babel / polyfill: para usar polyfill en babel

whatwg-fetch: incluye la funcionalidad de recuperación

es6-promise - fetch polyfill incluye promesa que tampoco es compatible con IE11

Paso 2: Agregar punto de entrada en webpack.config

entrada: ["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 5

También puede usar ProvidePlugin de ProvidePlugin con los paquetes ProvidePlugin imports-loader y ProvidePlugin exports-loader como se describe en esta respuesta , lo que elimina la necesidad de importar cualquier cosa en su código:

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

Al momento de escribir, hay un problema de compatibilidad con la versión 3.0.0 de whatwg-fetch . La solución alternativa es usar lo siguiente:

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

Answer 6

Usaré los dos siguientes CDN como este:

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

Window.fetch o fetch es lo mismo ... técnicamente fetch () es un método global del objeto Window