Méthodes asynchrones/d'attente pour la gestion des erreurs à l'aide d'Axios dans React
P粉186904731
2023-08-26 10:41:39
<p>J'utilise Axios pour obtenir des données : </p>
<pre class="brush:php;toolbar:false;">export const getProducts = async () =>
essayer {
const { data } = attendre axios.get(`/api/products`)
renvoyer des données
} attraper (erreur) {
console.log (erreur)
erreur de retour
}
}</pré>
<p>Tout va bien, mais je dois détecter les erreurs http dans un bloc try. Par exemple, lorsque la connexion au serveur est perdue, Axios renvoie un objet AxiosError : </p>
<blockquote>
<ol>
<li>AxiosError {message : 'La demande a échoué avec le code d'état 404', nom : 'AxiosError', code : 'ERR_BAD_REQUEST', config : {…}, requête :
XMLHttpRequest,...}</li>
<li>Code : "ERR_BAD_REQUEST"</li>
<li>Configuration : {transition : {…}, adaptateur : array(2), transformRequest : array(1), transformResponse : array(1), délai d'attente : 0,
…}</li>
<li>Message : "La demande a échoué avec le code d'état 404"</li>
<li>Nom : "AxiosError"</li>
<li>Requête : XMLHttpRequest {onreadystatechange : null, readyState : 4, délai d'attente : 0, withCredentials : false, téléchargement : XMLHttpRequestUpload,
…}</li>
<li>Réponse : {data : 'nnn<métacaractères...re>ne peut pas être récupéré
/api/productsnnn', statut : 404, statusText : 'Non
Trouvé ', En-têtes : AxiosHeaders, Configuration : {...},...}</li>
<li>Stack : "AxiosError : échec de la demande avec le code d'état 404n lors de la résolution
(webpack-internal:///./node_modules/axios/lib/core/settle.js:24:12)n
dans XMLHttpRequest.onloadend
(webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:117:66)"</li>
<li>[[Prototype]] : Erreur</li>
</ol>
</blockquote>
<p>Le problème est le suivant : s'il y a une erreur, je souhaite afficher un div indiquant "Une erreur s'est produite lors de l'obtention des données". S'il n'y a aucune erreur, affichez une table de produits de la manière habituelle. </p>
<p>J'appelle ma fonction comme ceci : </p>
<pre class="brush:php;toolbar:false;">const productsArr = wait getProducts()</pre>
<p>Comment savoir si productsArr est un tableau de produits valide ou une AxiosError ? </p>
Vous pouvez voir comment gérer les erreurs dans la documentation officielle : https://axios-http.com/docs/handling_errors
Si aucune réponse n'est reçue, vous pouvez visualiser l'erreur (copiée depuis la documentation axios)
Vous pouvez envelopper vos composants avec des limites de gestion des erreurs. Vous pouvez créer un composant qui enveloppera d'autres composants là où l'erreur se produit et utiliser
componentDidCatch
生命周期方法,这与在try-catch中使用catch{}
pour la même chose. https://reactjs.org/docs/react-component.html#componentdidcatch. Ou utilisez un package npm populaire https://www.npmjs.com/package/react-error-boundary