Utilisation Async/Await avec Axios dans React.js
Suivantes
Comment utiliser async/await avec axios à réagir
Je suis en train de faire une simple requête get à mon serveur à l'aide de Async/Await dans un React.js App.
La charge du serveur d'un simple JSON à /data
qui ressemble à ceci
JSON
{
id: 1,
name: "Aditya"
}
Je suis en mesure d'obtenir les données de mon Réagir Application à l'aide de simple jquery ajax méthode get.
Cependant, je tiens à faire usage de l'axios bibliothèque et Async/Await à suivre ES7 normes.
Mon code ressemble à ceci:
class App extends React.Component{
async getData(){
const res = await axios('/data');
console.log(res.json());
}
render(){
return(
<div>
{this.getData()}
</div>
);
}
}
En utilisant cette approche, j'obtiens l'erreur suivante:
Les objets ne sont pas valides comme Réagir enfant (trouvé: [objet de la Promesse]). Si
que vous vouliez rendre une collection d'enfants, utiliser un tableau à la place.
Je ne suis pas à la mettre en œuvre correctement?
Idéalement, la mise à jour de votre question avec un exécutable un Minimum, Complètes et Vérifiables exemple démontrer le problème à l'aide d'un espace réservé pour l'ajax (par exemple,
setTimeout
ou similaire), en utilisant la Pile des Extraits (le [<>]
bouton de barre d'outils). Pile Extraits de soutien de Réagir, y compris JSX; comment faire....mais l'ajout d'un code absolument rend les choses claires. 🙂
Pour info,
async/await
fait partie de ES2017, pas ES7 (ES2016).Merci pour l'information.
OriginalL'auteur Singh | 2017-10-13
Vous devez vous connecter pour publier un commentaire.
Deux questions sauter:
Votre
getData
ne retourne jamais rien, donc sa promesse (async
renvoient toujours une promesse de résoudre avecundefined
quand elle se résoutLe message d'erreur indique clairement que vous êtes en essayant de restituer directement la promesse
getData
retourne, plutôt que d'attendre qu'il résoudre et puis le rendu de la résolutionAborder #1:
getData
devrait retour le résultat de l'appeljson
:Addressig #2: il Nous faudrait voir plus de votre code, mais, fondamentalement, vous ne pouvez pas faire
...parce que ne pas attendre pour la résolution. Vous auriez besoin au lieu d'utiliser
getData
pour définir l'état:...et l'utilisation de l'état au moment de rendu:
Mise à jour: Maintenant que vous avez montré votre code, vous devez faire quelque chose comme ce:
Plus de mise à jour: Vous ai indiqué une préférence pour l'utilisation de
await
danscomponentDidMount
plutôt quethen
etcatch
. Vous souhaitez faire que par l'imbrication d'uneasync
IIFE de la fonction et de veiller à ce que la fonction ne peut pas les jeter. (componentDidMount
lui-même ne peut pas êtreasync
, rien ne consommer que la promesse). E. g.:Je ne pense pas que c'est le message d'erreur exact. 🙂 J'ai dit que "quelque chose". J'ai mis à jour le ci-dessus était manquant
this.
surgetData
..catch(err => { /*...gérer l'erreur...*/}); exécute maintenant.Il dit res.json() n'est pas une fonction.
Juste pour info...
return res.json()
aurait besoin d'êtrereturn await res.json()
dans l'exemple ci-dessus, correct? Si vous êtes de retour sur la ligne suivante, la ligne de retour d'exécuter tout de suite au lieu d'attendre d'être défini parconst res
droite au-dessus d'elle.Non, vous n'avez pas à -- mais il peut être une bonne idée d'un code de point de vue entretien, merci. "Si vous êtes de retour sur la ligne suivante, la ligne de retour d'exécuter tout de suite au lieu d'attendre..." Non, c'est incorrect. Le
return
ligne ne sera pas exécuté jusqu'à ce que leawait axios('/data')
résout. Donc le code sans leawait
, la promesse créé pargetData
êtreasync
serait juste d'esclave à celui retourné parres.json()
. Mais à partir d'un code maint. pers., vous avez raison, il vaut mieuxawait
- parce qu'il serait facile de louper lorsque vous apportez des modifications àgetData
.OriginalL'auteur T.J. Crowder
Dans mon expérience, au cours de la dernière quelques mois, j'ai réalisé que la meilleure façon d'y parvenir est:
Si vous essayez de faire une requête post sur les événements tels que la souris, puis appel
getData()
fonction de l'événement et de remplacer le contenu de celui-ci comme suit:En outre, si vous êtes d'effectuer toute demande lorsque le composant est sur le point de charger il suffit ensuite de remplacer
async getData()
avecasync componentDidMount()
et de modifier le rendu de la fonction comme ceci:componentWillMount
unasync
fonction. Réagir ignore le retour de la promesse. 2. Saufres.data
est un accesseur retour d'une promesse, il ne fait aucun sens d'utiliserawait
lors de l'accès.J'ai simplement essayé de simplifier la réponse. Aucune infraction, mais je pense que
then
etcatch
n'est pas la norme la plus récente (ES6) de donner suite à une promesse. En outre, res.json() ne fonctionnait pas pour moi et j'ai donc dû le remplacer par res.les données qui vient avec une promesse enGET
ouPOST
demande.then
etcatch
de la ES2015 (aka "ES6") façon de traiter avec des promesses.async
/await
sont les ES2017 ("ES8"). Mais vous ne pouvez utiliserawait
au sein d'uneasync
fonction, et de fairecomponentWillMount
async
est la création d'une promesse qui ne sera jamais utilisé. Si vous souhaitez utiliserawait
au lieu de cela, c'est très bien, mais vous auriez du le faire différemment, à partir de seulement giflerasync
surcomponentWillMount
. En tout cas, franchement, revenir deux mois plus tard, et la publication d'une réponse qui vient de réglages de l'existant sans atttribution n'est pas cool.c'est plus clair ... merci
OriginalL'auteur Singh