The fetch api is really helpful but unfortunately it doesn't work for most browsers especially internet explorer. I tried to convert my code from es6 to es5 using babel but it doesn't solve this issue. It still includes fetch when it is converted to es5. How can I get around this issue. Here is the es6 code:

var btnText = document.getElementById('btnText');
var btnJson = document.getElementById('btnJson');
btnText.addEventListener("click",fetchBtnText);
function fetchBtnText() {
  fetch("sample.txt")
    .then((response) => response.text())
.then((data) => console.log(data))
}

Here is the conversion to es5

'use strict';
var btnText = document.getElementById('btnText');
var btnJson = document.getElementById('btnJson');
btnText.addEventListener("click", fetchBtnText);
function fetchBtnText() {
  fetch("sample.txt").then(function (response) {
    return response.text();
  }).then(function (data) {
    return console.log(data);
  });
}

The fetch api is really helpful but unfortunately it doesn't work for most browsers especially internet explorer. I tried to convert my code from es6 to es5 using babel but it doesn't solve this issue. It still includes fetch when it is converted to es5. How can I get around this issue. Here is the es6 code:

var btnText = document.getElementById('btnText');
var btnJson = document.getElementById('btnJson');
btnText.addEventListener("click",fetchBtnText);
function fetchBtnText() {
  fetch("sample.txt")
    .then((response) => response.text())
.then((data) => console.log(data))
}

Here is the conversion to es5

'use strict';
var btnText = document.getElementById('btnText');
var btnJson = document.getElementById('btnJson');
btnText.addEventListener("click", fetchBtnText);
function fetchBtnText() {
  fetch("sample.txt").then(function (response) {
    return response.text();
  }).then(function (data) {
    return console.log(data);
  });
}

• javascript
• html
• es6-promise
• fetch-api

1 Answer 1

You could use a polyfill, like this https://github./github/fetch