Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

First Fetch API call cancelled by the second in IE11

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?

like image 711
Andy5 Avatar asked May 16 '16 16:05

Andy5


People also ask

Does ie11 support fetch API?

Fetch is Not Supported on Internet Explorer 11.

Can fetch request be canceled?

To be able to cancel fetch , pass the signal property of an AbortController as a fetch option: let controller = new AbortController(); fetch(url, { signal: controller. signal }); The fetch method knows how to work with AbortController .

How do I abort API request?

Even for new methods of making API requests, by accepting a signal property in their request options object, you can abort requests using the abort() method.

How does fetch return an API call?

The Fetch API allows you to asynchronously request for a resource. Use the fetch() method to return a promise that resolves into a Response object. To get the actual data, you call one of the methods of the Response object e.g., text() or json() . These methods resolve into the actual data.


1 Answers

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

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

like image 174
Fez Vrasta Avatar answered Oct 12 '22 23:10

Fez Vrasta