Méthodes asynchrones/d'attente pour la gestion des erreurs à l'aide d'Axios dans React
P粉186904731
P粉186904731 2023-08-26 10:41:39
0
1
522
<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>
P粉186904731
P粉186904731

répondre à tous(1)
P粉066224086

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal