Apakah yang perlu saya lakukan jika "TypeError: Tidak boleh membaca sifat 'yyy' null" muncul apabila menggunakan axios dalam aplikasi Vue?

Dalam aplikasi Vue, anda boleh menghantar permintaan rangkaian melalui perpustakaan axios untuk mendapatkan data. Walau bagaimanapun, apabila menggunakan axios, anda mungkin menghadapi mesej ralat "TypeError: Tidak dapat membaca sifat 'yyy' null" Apakah masalahnya dan bagaimana untuk menyelesaikannya? Dalam artikel ini, kami akan menjawabnya satu per satu.

Mula-mula, mari belajar tentang perpustakaan axios. Ia ialah klien http berasaskan Promise untuk pelayar dan node.js yang boleh menghantar permintaan tak segerak dan mengendalikan respons dengan mudah. Biasanya, cara untuk menggunakan axios dalam Vue adalah dengan mengimportnya dan melekapkannya ke dalam prototaip Vue supaya ia boleh digunakan sepanjang aplikasi.

Sebagai contoh, dalam main.js, kita boleh melaksanakannya seperti ini:

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

Kemudian, dalam komponen Vue, kita boleh menggunakan aksios seperti ini:

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

Dalam kod di atas, kita lulus $this.$http. get() Kaedah menghantar permintaan GET dan mendapatkan data yang dikembalikan oleh antara muka /api/data. Jika semuanya berjalan lancar, kami akan melihat data tindak balas pelayan dalam konsol dan meneruskan pemprosesan seterusnya seperti biasa. Walau bagaimanapun, jika mesej ralat "TypeError: Cannot read property 'yyy' of null" muncul, ini bermakna kami telah menghadapi masalah.

Jadi, apakah maksud mesej ralat ini? Biasanya, ini bermakna bahawa sifat atau kaedah yang kami cuba akses apabila memproses data tindak balas tidak wujud atau tidak ditentukan. Ini berkemungkinan besar kerana format data yang kami perolehi bukanlah format yang kami jangkakan, tetapi batal atau tidak ditentukan. Sebagai contoh, jika kami menjangkakan data yang dikembalikan sebagai objek, tetapi data sebenar yang dikembalikan adalah batal, maka apabila kami cuba mengakses sifat objek, mesej ralat "Tidak dapat membaca sifat 'xxx' nol" akan muncul. .

Jadi, bagaimana untuk menyelesaikan masalah ini? Kami boleh menyemak sama ada data yang dikembalikan adalah batal atau tidak ditentukan sebelum membuat permintaan rangkaian untuk mengelakkan ralat dalam pemprosesan berikutnya. Kami boleh menggunakan pernyataan bersyarat dalam JavaScript untuk memproses, contohnya:

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

Dalam kod di atas, kami mula-mula menentukan sama ada respons.data adalah batal atau tidak ditentukan, dan jika tidak, kemudian tentukan sama ada ia adalah jenis objek. Jika semua syarat dipenuhi, anda boleh mengakses sifatnya seperti biasa.

Selain menyemak semasa mendapatkan data, kami juga boleh menggunakan pemaparan bersyarat dalam komponen Vue untuk mengelakkan mengakses sifat yang tidak wujud, contohnya:

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

Dalam kod di atas, kami menggunakan arahan v-if untuk menentukan sama ada data. xxx wujud, dan jika ada, memaparkan kandungannya. Jika tidak, "Tidak dapat memperoleh data yang sah" akan dipaparkan.

Ringkasnya, apabila mesej ralat "TypeError: Cannot read property 'yyy' of null" muncul apabila menggunakan axios untuk menghantar permintaan dalam aplikasi Vue, kita harus terlebih dahulu menyemak sama ada data yang diperolehi adalah batal atau tidak ditentukan untuk mengelak daripada mengakses bukan -data yang wujud atau kaedah. Pada masa yang sama, kami juga boleh menggunakan pemaparan bersyarat untuk mengelak daripada mengakses sifat yang tidak wujud, dengan itu meningkatkan keteguhan dan kestabilan aplikasi.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika "TypeError: Tidak boleh membaca sifat 'yyy' null" muncul apabila menggunakan axios dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!