I have some Problem with this code. I will use this code instead of a polyfill. The code works using Firefox, Chrome, Opera and MS Edge but the Internet Explorer 11 is not responding. Can someone give me a tip for Troubleshooting.

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);
}
​

I have some Problem with this code. I will use this code instead of a polyfill. The code works using Firefox, Chrome, Opera and MS Edge but the Internet Explorer 11 is not responding. Can someone give me a tip for Troubleshooting.

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);
}
​

Thank You.

Best Regards, Markus

• javascript
• fetch

3 Answers 3

I would remend looking into isomorphic fetch

On request, here is how you would use it

Install the isomorphic-fetch and es6-promise packages

npm install --save isomorphic-fetch es6-promise

After you have installed the packages, require them in your application

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

This should allow you to use fetch normally

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

I would like to add something here as I came here with the same problem in IE11 with fetch API. In my case, I was using fetch in vanilla JS not in conjunction with any framework.

I already had a polyfill from here. One can just download fetch.umd.js file and place inside script tag. Then I got undefined Promise error. So I had to have a Promise polyfill too from here.

I have used both of them in a simple script tag in my layout file just before I load other scripts as I am using Visual Studio and Promise polyfill also has cdn:

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

I hope it will help someone looking for solution without having to install them as mentioned in above examples.

i have used isomorphic fetch and it works fine in all browsers

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