React Fetch ne fonctionne pas dans IE11
j'ai une application ReactJS qui fonctionne comme prévu dans Chrome, mais qui échoue dans IE-11.
le problème est celui - ci-nous avons deux listes déroulantes qui sont peuplées à partir des services de repos lorsque la page est chargée pour la première fois. L'application est en cours d'exécution en vertu du protocole SSL. Lorsque la page est chargée via IE-11, je reçois un problème de bogue IE-11 où le premier appel de requête est annulé par le second-le bogue est décrit ici:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1282036 /
donc, je demande juste à la communauté s'il y a un travail autour pour IE-11 ou est là pour mettre en œuvre mon code séquentiellement où si le premier est complet le second s'appelle:
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 et est utilisé par d'autres dans L'application React. Donc, ce que je pense si il est loin d'avoir un niveau d'abstraction où les deux goutte les listes basses peuvent appeler séquentiellement et ensuite appeler le dessus en dessous, peut-être?
4 réponses
inclut juste isomorphic-fetch comme polyfill pour le faire fonctionner sur les navigateurs non pris en charge.
il semble que vous utilisez 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 à un tiers lib tel que Axios, superagent, etc...
comme souligné, fetch n'est pas supporté par IE11, j'ai aussi eu ce problème dans mon application React. Vous pouvez, alternativement, utiliser Axios .
si vous migrez (ou si vous pouvez migrer), cochez ma réponse à ce message
en gros, vérifiez ce code:
Fetch JSON post request
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 post request
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 que l'application utilise, donc peu importe si vous utilisez fetch ou axios. Par exemple dans " votre-commune.js':
async function request(url, method, objectData){
// use axios or fetch or isomorphic-fetch
}
donc si votre application complète utilise votre fonction request, vous changez simplement la bibliothèque dans cette fonction et aucun mal n'est fait tant que vous retournez le même objet ou la même valeur. Vous pouvez également envelopper le fetch (ou axios ou tout autre http bibliothèque que vous utilisez) dans un bloc try/catch pour gérer les promesses si vous utilisez async/wait.
C'est-à-dire ne pas offrir de soutien pour l'utilisation fetch. Vous devez utiliser un peu de polyfill pour résoudre ce problème. Vous pouvez utiliser http://github.github.io/fetch / .