Que dois-je faire si « TypeError : Cannot read property 'xxx' of undefined » apparaît lors de l'utilisation d'axios dans une application Vue ?

L'utilisation d'axios dans les applications Vue est une méthode de requête réseau courante. Cependant, vous pouvez parfois rencontrer l'erreur « TypeError : Impossible de lire la propriété 'xxx' de undéfini » lors de l'utilisation.

Cette erreur se produit généralement lors de l'utilisation d'axios. La requête renvoie undéfini, mais le programme essaie toujours d'accéder aux propriétés de l'objet. Afin d'éviter cette erreur, il existe plusieurs solutions :

1. Vérifiez la situation de retour de l'interface

Lorsque vous utilisez axios pour envoyer une requête, vous pouvez traiter le résultat du retour dans la méthode then(). Cependant, si l'interface renvoie undéfini, même si nous portons un jugement dans la méthode then(), nous rencontrerons l'erreur "Impossible de lire la propriété 'xxx' de undéfini".

Par conséquent, lorsque vous utilisez axios, vous devez faire attention à vérifier la situation renvoyée par l'interface. Utilisez l'instruction console.log() pour afficher les résultats renvoyés et vérifier s'il existe une situation indéfinie.

2. Déterminer si l'attribut existe

Si nous confirmons que le résultat renvoyé par l'interface est un objet, il est préférable de porter un jugement de définition avant d'accéder aux attributs de l'objet. Par exemple :

axios.get('/api/data')
  .then(response => {
    if(response.data && response.data.xxx) {
      // ...处理逻辑
    }
  })

De cette façon, même si l'interface renvoie undéfini, le programme portera un jugement lors de l'accès à la propriété et évitera les erreurs.

3. Définir la valeur par défaut

Pendant le développement, parfois les données renvoyées par l'interface peuvent être vides et nous devons utiliser les données dans le programme. À ce stade, nous pouvons définir une valeur par défaut pour éviter l'erreur « Impossible de lire la propriété 'xxx' de non définie ». Par exemple :

data() {
  return {
    list: [],
    isLoading: false
  }
},
created() {
  this.getData();
},
methods: {
  getData() {
    axios.get('/api/list')
      .then(response => {
        this.list = response.data || []; // 设置一个默认值
        this.isLoading = false;
      })
      .catch(error => {
        console.log(error);
        this.isLoading = false;
      });
  }
}

Dans le code ci-dessus, en définissant une valeur par défaut (this.list = Response.data || []), même si l'interface renvoie undefined, le programme peut s'exécuter normalement et "Impossible de lire la propriété" ne le fera pas. apparaît 'xxx' d'une erreur "indéfinie".

Résumé

L'erreur "Impossible de lire la propriété 'xxx' de undéfini" se produit lors de l'utilisation d'axios dans une application Vue. Cela est généralement dû au fait que l'interface renvoie un défini et que le programme ne porte pas de jugement lors de l'accès aux propriétés de l'objet. Afin d'éviter cette erreur, nous devons vérifier l'état de retour de l'interface, déterminer si l'attribut existe et définir la valeur par défaut dans le code pour garantir le fonctionnement normal du programme.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!