Méthodes asynchrones/d'attente pour la gestion des erreurs à l'aide d'Axios dans React

Question

J'utilise Axios pour obtenir des données :

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()

Comment savoir si productsArr est un tableau de produits valide ou une AxiosError ?

Answer 1

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)

else if (error.request) {
      // 发送请求但未收到响应
      // `error.request` 在浏览器中是XMLHttpRequest的实例，在node.js中是http.ClientRequest的实例
      console.log(error.request);

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