First Fetch API call cancelled by the second in IE11

Question

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?

Answer 1

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

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