19

I have a ReactJS application that works as expected in Chrome, but fails in IE-11.

The problem is this - we have two drop down lists which are populated from rest services when the page is first loaded. The application is running under SSL. When the page is loaded through IE-11, I get an IE-11 bug issue where the first request call gets cancelled out by the second-the bug is described here:

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1282036/

So, I am just asking the community whether there is a work around for IE-11 or is there away to implement my code sequentially where if the first is complete the second is called:

export let getMainData = (dtType, url)=> {
    return dispatch=>{
           dispatch(sendGet(dtType));
           const action = (async(url) => {
                  const response = await fetch(url);
                     let data = await response.json();
                        dispatch(receiveGet(dtType,data));
         });
       action(url);
     };
};

The code above is common code and is used by others in the React App. So what I am thinking if there is away to have a level of abstraction where the two drop down lists can call sequentially and then call the above underneath, perhaps?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Andy5
  • 2,319
  • 11
  • 45
  • 91

5 Answers5

31

Just include isomorphic-fetch as polyfill to make it work on unsupported browsers.

https://github.com/matthew-andrews/isomorphic-fetch

Fez Vrasta
  • 14,110
  • 21
  • 98
  • 160
7

As pointed out, fetch is not supported by IE11, I also had this problem in my React app. You can, alternatively, use Axios.

If you are migrating (or can migrate), check My answer to this post

Basically, check this code:

Fetch JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Axios JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

I always have main request function that the app uses, so it doesn't matter if you use fetch or axios. For example in 'your-common.js':

async function request(url, method, objectData){
    // use axios or fetch or isomorphic-fetch
}

So if your complete app is using your request function, you simply change the library in that function and no harm is done as long as you return the same object or value. You can also wrap the fetch (or axios or whatever http library you use) in a try/catch block to handle promises if using async/await.

c-chavez
  • 7,237
  • 5
  • 35
  • 49
  • keep in mind axios doesnot work well with streams. fetch does but fetch does. Also using polyfills can make it work on IE11, 10 and 9 too. here is the link mentioning the same thing. https://create-react-app.dev/docs/supported-browsers-features/ – Abdulmoiz Ahmer May 07 '20 at 13:38
3

Unrelated to ReactJS, but I hope useful to others who land here as I did.

I found the Github fetch polyfill and TaylorHakes' Promise polyfill nice and easy to get started with in the context of my ASP.NET MVC web application. Both were recommended by https://ourcodeworld.com

OutstandingBill
  • 2,614
  • 26
  • 38
2

It seems that you are using the Fetch API which is not supported yet by IE. That's why your app works on Chrome.

I would suggest you moving to a 3rd party lib such as Axios, superagent, etc...

Felipe Skinner
  • 16,246
  • 2
  • 25
  • 30
1

IE dont offer suport for the fetch use. You need use some polyfill for solve this problem. You can use http://github.github.io/fetch/.

  • 3
    Welcome to Stack Overflow! A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259/165483) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) – Samuel Liew Apr 12 '18 at 01:26