Apollo-link-rest: Заголовки: проблемы с соответствием полифилу / итерируемому [Edge]

@ val-samonte Я рекомендую вам использовать Polyfill, подобный этому: https://github.com/jimmywarting/fetch-headers

Спасибо, попробую и посмотрю, решит ли это проблему. Позже закроет это.

@fbartho извините, похоже, проблема все еще существует. После реализации предоставленного вами полифила я получаю эту ошибку:

После трассировки стека он находится в этом коде:

Поправьте меня, если я ошибаюсь, но, как я понимаю, этот ток должен быть экземпляром заголовка, верно? После проверки https://developer.mozilla.org/en-US/docs/Web/API/Headers у него нет метода forEach, поэтому я предполагаю, что это должен быть массив заголовков?

Согласно той странице, на которую вы ссылаетесь, заголовки должны иметь метод forEach ? Может быть, полифилл заголовков, с которым я вас связал, неправильный?

Глядя на модульные тесты полифиллов, у них есть тот, который утверждает, что заголовки должны иметь метод forEach
https://github.com/jimmywarting/fetch-headers/blob/614411d49505db07b350f7afa02290fae2170f56/test/test.js#L107 -L122

Вы выбрали другую библиотеку полифиллов?

Ой, беда, на боковой панели не увидел. В любом случае да, я могу подтвердить, что использую правильный полифилл:

Я создал свой проект с помощью create-react-app и извлек из него, отредактировал файл config / polyfill.js и добавил этот полифилл чуть ниже whatwg-fetch.

require('whatwg-fetch');
self.Headers = require('fetch-headers');

Я что делаю неправильно?

Мой опыт говорит, что для полифилла вам нужна строка вроде:
global.Headers = global.Headers || require('fetch-headers');

Отказ от ответственности: я не очень хорошо знаком с create-react-app и config/polyfill.js . Я также работаю с TypeScript. Итак, мой фактический код (поскольку Android нуждается в полифилле) выглядит следующим образом:

import PolyfillHeaders = require("fetch-headers");
if (global.Headers == null) {
    global.Headers = PolyfillHeaders;
}

Обратите внимание: я должен переместить импорт в блок if как динамический импорт. (один из этих дней).

Ах да, это намного лучше, я попробую.

Ах да, теперь я вспомнил. Причина, по которой я назначил его напрямую, заключается в том, что у Edge есть проблемы с существующим заголовком, поэтому global.Headers = global.Headers || require('fetch-headers'); неприменимо.

Я также попробовал это и вернулся, обнаружив ту же ошибку, что и опубликовал.

Но да, даже в chrome нет Headers.forEach, и мне также было интересно, почему у MDN его нет в таблице совместимости ниже. Можем ли мы пока найти обходной путь?

Я был бы рад принять PR, в котором используется альтернативный способ перебора заголовков. Я думаю, что спецификация требует iterable -соответствия для заголовков, поэтому, если вы переключите код forEach на Iterable, меня это устроит. - Я думаю, что людям в конечном итоге придется полифилить es2015.iterable вместо этого, чтобы это работало, так что ... это проблема.

Понимаю! Спасибо, постараюсь отправить PR, когда буду доступен. Рад помочь.

Примечание: TypeScript считает, что Headers должен иметь метод forEach .

Я собираюсь закрыть эту проблему, поскольку мы ответили / решили исходный вопрос @ val-samonte, но, пожалуйста, не стесняйтесь отправлять PR для повторного использования вместо forEach !

@ val-samonte у тебя была возможность взглянуть на это?
Если нет, я могу взглянуть и поднять PR, поскольку я также сталкиваюсь с той же проблемой в IE11.

Думал заменить

current.forEach(function (value, key) {
    accumulator.append(key, value);
});

с...

for (var pair of current.entries()) {
    accumulator.append(pair[0], pair[1]);
}

Если вы ищете максимальную совместимость, вы можете просто сделать: for const key in current Я не уверен, что entry () был доступен намного раньше, чем forEach

@ val-samonte Это происходит потому, что headers param равен undefined в normalizeHeaders function https://github.com/apollographql/apollo-link-rest/blob/master/src /restLink.ts#L487

Вызов new Headers с параметром undefined качестве параметра вызывает эту ошибку TypeError.

Пока это не будет решено, быстрое исправление будет заключаться в добавлении некоторого параметра заголовка при создании RestLink.
Например:

const authRestLink = new RestLink({
  uri: `${baseUrl}/1.0/auth/`,
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
});

@ val-samonte Это происходит потому, что headers param равен undefined в normalizeHeaders function https://github.com/apollographql/apollo-link-rest/blob/master/src /restLink.ts#L487

Вызов new Headers с параметром undefined качестве параметра вызывает эту ошибку TypeError.

Пока это не будет решено, быстрое исправление будет заключаться в добавлении некоторого параметра заголовка при создании RestLink.
Например:

const authRestLink = new RestLink({
  uri: `${baseUrl}/1.0/auth/`,
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
});

@ stefan-djokic Эта проблема решена? У меня тоже возникла такая же проблема, но не в браузере Edge. Я использую weixin для включения apollo-link-rest, и в среде нет заголовков, не найдено заголовков для их запроса api. Не могли бы вы предложить помощь в поиске решений для взлома или пропуска перечисленных нами ошибок? Очень признателен, если вы могли бы предложить какие-либо подсказки или помощь.