У меня проблема с Fetch API с использованием Internet Explorer 11

Question

У меня проблема с этим кодом.Я буду использовать этот код вместо polyfill.Код работает с использованием Firefox, Chrome, Opera и MS Edge, но Internet Explorer 11 не отвечает.Может кто-нибудь дать мне совет по устранению неполадок.

function fetchFile(file,method,params,target) {

const controller = new AbortController();
const signal = controller.signal;

setTimeout(controller.abort.bind(controller), 5000); 

var options = { method: method, signal }; 

if (params != 'default') {

switch (method) { case 'GET':  file = file+'?'+params; break;

                  case 'POST': var data = params; break; default: data = 'data'; break;}

} 

switch (method) { case 'POST': options.body = data; options.headers = {"Content-Type": "application/x-www-form-urlencoded"}; break;}

fetch(file, options).then(function (response)  {

  return response.text();

}).then(function (data)  {

  document.getElementById(target).innerHTML = data;  

  switch (data) {case '': loadXhttp(file,method,params,target); break;} 
  
  
}).catch(function (data) {


switch (error.name) {

   case 'AbortError': var error = 'Abort Error'; break; 

   default: error = 'Other Error'; break;} 

   document.write(error);

});

}

function loadXhttp(file,method,params,target) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(target).innerHTML = this.responseText;
    }
  };
  xhttp.open(method, file, true);
  
  switch (method) {case 'GET': var send = null; break;
                  case 'POST': xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				               send = params; break;} 
  
  xhttp.send(send);
}
​

Спасибо.

С наилучшими пожеланиями, Маркус

Answer 1

Я хотел бы добавить кое-что здесь, поскольку я пришел сюда с той же проблемой в IE11 с API выборки.В моем случае я использовал fetch в vanilla JS не в сочетании с какими-либо фреймворками.

У меня уже был полифилл из здесь .Можно просто скачать файл fetch.umd.js и поместить в тег скрипта.Тогда я получил неопределенную ошибку Promise.Таким образом, я должен был иметь полифил Promise от здесь .

Я использовал оба из них в виде простого тега сценария в моем файле макета непосредственно перед тем, как загружать другие сценарии, когда я использую VisualВ Polyfill Studio и Promise также есть cdn:

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

Я надеюсь, что это поможет кому-то искать решение, не устанавливая его, как указано в примерах выше.

Answer 2

Я использовал изоморфную выборку, и она отлично работает во всех браузерах

require('es6-promise').polyfill();
require('isomorphic-fetch');

Answer 3

Для всех, кто обнаружит это после того, как не получит заполненную форму приложения React Netlify, отправьте ее в IE 11 для корректной работы (форма обновляет панель URI, но фактически не отправляет) - это ваш ответ!

npm install --save isomorphic-fetch es6-promise

При первой загрузке JS-файла (в моем случае index.js) добавьте:

import "es6-promise";
import "isomorphic-fetch";

Отправка должна пройти.

(Если вы даже не можете заставить IE 11 визуализировать ваше приложение React вообще, продолжайте, «npm install babel-polyfill» и сделайте импорт самой первой строки в вашем первом загруженном файле JS).

Answer 4

Я бы порекомендовал изучить изоморфную выборку

По запросу, вот как вы бы это использовали

Установите пакеты isomorphic-fetch и es6-promise

npm install --save isomorphic-fetch es6-promise

После установки пакетов require их в вашем приложении

require('es6-promise').polyfill()
require('isomorphic-fetch')

Это позволит вам использовать fetch обычно

fetch(url).then(handleResponse).catch(handleError)