web-dev-qa-db-fra.com

React Fetch ne fonctionne pas dans IE11

J'ai une application ReactJS qui fonctionne comme prévu dans Chrome, mais échoue dans IE-11.

Le problème est le suivant: nous avons deux listes déroulantes qui sont remplies à partir des services de repos lorsque la page est chargée pour la première fois. L'application s'exécute sous SSL. Lorsque la page est chargée via IE-11, j'obtiens un problème de bogue IE-11 dans lequel le premier appel de demande est annulé par le second. Le bogue est décrit ici:

https://developer.Microsoft.com/en-us/Microsoft-Edge/platform/issues/1282036/

Je demande donc simplement à la communauté s'il existe un moyen de contourner IE-11 ou s'il est possible de mettre en œuvre mon code de manière séquentielle. Si le premier est terminé, le second est appelé:

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

Le code ci-dessus est un code commun utilisé par d’autres personnes dans l’application React. Donc, qu'est-ce que je pense s'il y a un niveau d'abstraction où les deux listes déroulantes peuvent appeler séquentiellement, puis appeler ci-dessus, peut-être?

javascriptreactjsfetch-api
13
Andy5

Il suffit d'inclure isomorphic-fetch en tant que polyfill pour que cela fonctionne avec des navigateurs non pris en charge.

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

16
Fez Vrasta

Il semble que vous utilisiez le Fetch API qui n'est pas encore supporté par IE. C'est pourquoi votre application fonctionne sur Chrome.

Je vous suggérerais de passer à une bibliothèque tierce telle qu'Axios, superagent, etc.

2
Felipe Skinner

Comme indiqué, la récupération n'est pas prise en charge par IE11, j'ai également eu ce problème dans mon application React. Vous pouvez également utiliser Axios .

Si vous migrez (ou pouvez migrer), vérifiez Ma réponse à ce post

Fondamentalement, vérifiez ce code:

Récupérer une demande de publication 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
}

Demande de publication 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
}

J'ai toujours la fonction de requête principale utilisée par l'application, peu importe si vous utilisez fetch ou axios. Par exemple dans 'your-common.js':

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

Ainsi, si votre application complète utilise votre fonction de requête, vous changez simplement la bibliothèque dans cette fonction et aucun mal n'est causé tant que vous retournez le même objet ou la même valeur. Vous pouvez également envelopper le fetch (ou axios ou la bibliothèque http que vous utilisez) dans un bloc try/catch pour gérer les promesses si vous utilisez async/wait.

1
c-chavez

IE ne propose pas de suport pour l'utilisation de l'extraction . Vous devez utiliser un polyfill pour résoudre ce problème . Vous pouvez utiliser http://github.github.io/fetch/ .

0
Leandro Budau