Kevin Kevin - 11 days ago 11
React JSX Question

ReactJS redux saga fetch api

I have following code in my ReactJS app that is not working on IE11 browser. The problem is with

fetch
call on IE11 browser. Application is not making the API call to server.

It works great on Chrome, Firefox, Safari and Edge. Could anyone please suggest what steps do I need to perform to support IE11 also? Thanks.

function toQueryString(obj) {
var parts = [];
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
parts.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]));
}
}
return parts.join("&");
}
var options = new Object;
options.searchoptions = JSON.stringify(searchoptions);
options.limit = limit;
options.offset = offset;
var optionstr = toQueryString(options);

return fetch(`${SERVER_URL}/api/resource/?${optionstr}`, {
method: 'get',
dataType: 'json',
credentials: 'same-origin',
headers: {
'Accept': 'application/json',
'contentType': 'application/json',
'X-CSRFToken': getCookie('csrftoken')
}
}).then(response => {
return response.json();
}).then(response => {
var data = JSON.parse(response);
return data;
}).then(json => {
return json;
});

Answer

fetch is not supported in IE 11. but you can use a polyfill https://github.com/github/fetch

You might also need a promise polyfill like babel-polyfill. https://babeljs.io/docs/usage/polyfill/

Notice: It includes more than just promise.

Comments