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

Dans une application Vue, vous pouvez envoyer des requêtes réseau via la bibliothèque axios pour obtenir des données. Cependant, lors de l'utilisation d'axios, vous pouvez rencontrer le message d'erreur « TypeError : Cannot read property 'yyy' of null ». Quel est le problème et comment le résoudre ? Dans cet article, nous y répondrons une par une.

Tout d’abord, découvrons la bibliothèque axios. Il s'agit d'un client http basé sur Promise pour les navigateurs et node.js qui peut facilement envoyer des requêtes asynchrones et gérer les réponses. Normalement, la façon d'utiliser axios dans Vue consiste à l'importer et à le monter dans le prototype Vue afin qu'il puisse être utilisé dans toute l'application.

Par exemple, dans main.js, nous pouvons l'implémenter comme ceci :

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.prototype.$http = axios

new Vue({
  render: h => h(App),
}).$mount('#app')

Ensuite, dans le composant Vue, nous pouvons utiliser axios comme ceci :

this.$http.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

Dans le code ci-dessus, nous passons $this.$http. get() La méthode envoie une requête GET et obtient les données renvoyées par l'interface /api/data. Si tout se passe bien, nous verrons les données de réponse du serveur dans la console et procéderons normalement au traitement ultérieur. Cependant, si le message d'erreur « TypeError : Cannot read property 'yyy' of null » apparaît, cela signifie que nous avons rencontré un problème.

Alors, que signifie ce message d'erreur ? En règle générale, cela signifie qu'une propriété ou une méthode à laquelle nous essayons d'accéder lors du traitement des données de réponse n'existe pas ou n'est pas définie. Cela est probablement dû au fait que le format de données que nous avons obtenu n'est pas celui auquel nous nous attendions, mais est nul ou indéfini. Par exemple, si nous nous attendons à ce que les données renvoyées soient un objet, mais que les données renvoyées réelles sont nulles, alors lorsque nous essayons d'accéder à une propriété de l'objet, le message d'erreur "Impossible de lire la propriété 'xxx' de null" apparaîtra. .

Alors, comment résoudre ce problème ? Nous pouvons vérifier si les données renvoyées sont nulles ou indéfinies avant de faire une requête réseau pour éviter des erreurs lors du traitement ultérieur. Nous pouvons utiliser des instructions conditionnelles en JavaScript pour traiter, par exemple :

this.$http.get('/api/data')
  .then(response => {
    if (response.data !== null && typeof response.data === 'object') {
      console.log(response.data.xxx)
    } else {
      console.log('无法获取到有效数据')
    }
  })
  .catch(error => {
    console.log(error)
  })

Dans le code ci-dessus, nous déterminons d'abord si réponse.data est nul ou indéfini, et sinon, déterminons ensuite s'il s'agit d'un type d'objet. Si toutes les conditions sont remplies, vous pouvez accéder normalement à ses propriétés.

En plus de vérifier lors de l'obtention des données, nous pouvons également utiliser le rendu conditionnel dans les composants Vue pour éviter d'accéder à des propriétés inexistantes, par exemple :

<template>
  <div>
    <p v-if="data && data.xxx">{{ data.xxx }}</p>
    <p v-else>无法获取到有效数据</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: null
    }
  },
  created () {
    this.$http.get('/api/data')
      .then(response => {
        this.data = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

Dans le code ci-dessus, nous utilisons l'instruction v-if pour déterminer si les données. xxx existe et, s'il est présent, restitue son contenu. Sinon, « Impossible d'obtenir des données valides » s'affichera.

En bref, lorsque le message d'erreur "TypeError: Cannot read property 'yyy' of null" apparaît lors de l'utilisation d'axios pour envoyer une requête dans une application Vue, nous devons d'abord vérifier si les données obtenues sont nulles ou indéfinies pour éviter d'accéder à des données non définies. -des données existantes ou des méthodes. Dans le même temps, nous pouvons également utiliser le rendu conditionnel pour éviter d'accéder à des propriétés inexistantes, améliorant ainsi la robustesse et la stabilité de l'application.

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!