React Fetch не работает в IE11

У меня есть приложение ReactJS, которое работает как ожидается в Chrome, но не работает в IE-11.

Проблема заключается в следующем: у нас есть два раскрывающихся списка, которые заполняются из служб отдыха при первой загрузке страницы. Приложение работает под SSL. Когда страница загружается через IE-11, я получаю ошибку с ошибкой IE-11, где первый запрос вызова отменяется вторым - здесь описывается ошибка:

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

Итак, я просто спрашиваю сообщество, есть ли работа для IE-11 или есть ли возможность реализовать мой код последовательно, где, если первое завершено, вызывается второе:

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);
 };
 };

Код выше является общим кодом и используется другими в приложении React. Итак, что я думаю, если у вас есть уровень абстракции, где два выпадающих списка могут вызывать последовательно, а затем вызывать вышеупомянутое внизу, возможно?

Ответ 1

Просто включите isomorphic-fetch в качестве polyfill, чтобы он работал с неподдерживаемыми браузерами.

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

Ответ 2

Кажется, вы используете Fetch API, который IE еще не поддерживается. Вот почему ваше приложение работает в Chrome.

Я бы посоветовал вам перейти на стороннюю библиотеку, такую как Axios, superagent и т.д.

Ответ 3

Как уже указывалось, выборка не поддерживается IE11, у меня также была эта проблема в моем приложении React. Вы также можете использовать Axios.

Если вы мигрируете (или можете мигрировать), проверьте Мой ответ на этот пост

.В основном, проверьте этот код:

Получить запрос JSON

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

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
}

У меня всегда есть основная функция запроса, которую использует приложение, поэтому не имеет значения, используете ли вы fetch или axios. Например, в your-common.js:

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

Таким образом, если ваше полное приложение использует вашу функцию запроса, вы просто изменяете библиотеку в этой функции, и никакого вреда не причиняется, пока вы возвращаете тот же объект или значение. Вы также можете обернуть выборку (или axios или любую используемую вами библиотеку http) в блок try/catch для обработки обещаний при использовании async/await.

Ответ 4

Не имеет отношения к ReactJS, но, надеюсь, пригодится другим, которые приземляются здесь, как и я.

Я обнаружил, что GitHet выборочный полифилл и TaylorHakes 'Promise polyfill приятно и легко начать в контексте моего веб-приложения ASP.NET MVC. Оба были рекомендованы https://ourcodeworld.com

Ответ 5

IE не предлагает поддержку для получения. Вам нужно использовать полифилл для решения этой проблемы. Вы можете использовать http://github.github.io/fetch/.