ES6 `fetch - undefined`

Я создаю сайт с ES6 и Babel.

В файле script мне нужно сделать 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()

К сожалению, это ничего не меняет, у меня такая же проблема. Любая помощь?

Ответы

Ответ 1

Вам нужно добавить модуль isomorphic-fetch в свой пакет package.json, а затем импортировать его.

npm install --save isomorphic-fetch es6-promise

Затем в вашем коде

import "isomorphic-fetch"

См. https://www.npmjs.com/package/isomorphic-fetch

Ответ 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>

Ответ 4

Вы также можете использовать Webpack ProvidePlugin с пакетами импорт-загрузчик и экспорт-загрузчик, как описано в этом ответе, что устраняет необходимость чтобы импортировать что-нибудь в ваш код:

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'
})

Ответ 5

Просто прошлой ночью. В конце концов, пробовав всевозможные вещи, решение было довольно простым:

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

стал

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

TL; выборка (материал) DR должна быть window.fetch(материал) EDIT Это работало для меня в Chrome

Ответ 6

Существует поддержка браузера для каждой новой функциональности, добавленной в Javascript. Вы можете увидеть поддержку браузера на https://caniuse.com/#feat=fetch

Выполните следующие 2 шага, чтобы использовать fetch в IE11

Шаг 1. Установите 3 пакета

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

@babel/polyfill - использовать polyfill в babel

whatwg-fetch - включает функцию извлечения

es6-обещание - получение полифилла включает обещание, которое также не поддерживается IE11

Шаг 2. Добавьте точку входа в webpack.config

entry: ["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;

Ответ 7

Window.fetch или fetch - то же самое... технически fetch() - это глобальный метод объекта Window