Search code examples
javascriptinternet-explorerfetch-apipolyfills

FETCH IE11: second fetch is not working in ie 11


the first time fetch is called, everything works correctly. on the second call, I get false. It works correctly in Chrome. Polyfill fetch is connected.

The code below translates to ES5 before uploading it to the server. I have hidden some variables.

const url = `Fake url for example`;
function addData(data) {
            console.log("Affiche", data);
            const randomAffiche = data.data[getRandomInt(data.data)];
            const date = randomAffiche.PROPERTY_DATES_VALUE.split('-')[1];
            eventImgElem.src = randomAffiche.IMG;
            eventTitleElem.innerHTML = randomAffiche.NAME;
            eventTitleElem.href = randomAffiche.DETAIL_PAGE_URL;
            eventLink.href = randomAffiche.DETAIL_PAGE_URL;
            eventDate.innerHTML = getMonth(date);
            eventLink.innerHTML = randomAffiche.PROPERTY_VENUE_VALUE;
            whereToGoLink.href = '/kudago/';
        }

        function fetchData(city) {
            try {
                fetch(url + city) // This fetch is returned data = false. Why?
                    .then(data => {
                        data.json()
                            .then(data => {
                                console.log("fetchData", data);
                                addData(data);
                            })
                    })
            } catch (e) {
                console.log(e);
            }

        }

        function getCity() {
            const url = "fake url for example";
            try {
                fetch(url) // This fetch is good
                    .then(data => {
                        data.json()
                            .then(data => {
                                console.log("getCity", data)
                                if (data.data) {
                                    fetchData(data.data.name); 
                                } else {
                                    console.log("Error getCity", data);
                                }
                            })

                    })

            } catch (e) {
                console.log(e);
            }
        }
        getCity();
enter image description hereenter image description here

Chrome is ok


Solution

  • This method helped me https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

    encodeURIComponent(url)
    

    IE 11 did not understand the cyrillic alphabet. this will help those who have Cyrillic in the request.