Vue アプリケーションで axios を使用しているときに、「TypeError: Cannot read property 'xxx' of unknown」というメッセージが表示された場合はどうすればよいですか?

WBOY
リリース: 2023-08-19 10:41:08
オリジナル
1630 人が閲覧しました

在Vue应用中使用axios时出现“TypeError: Cannot read property \'xxx\' of undefined”怎么办?

Vue アプリケーションでの axios の使用は、一般的なネットワーク リクエスト方法です。ただし、使用中に「TypeError: 未定義のプロパティ 'xxx' を読み取れません」というエラーが発生する場合があります。

このエラーは通常、axios を使用しているときに発生します。リクエストは未定義を返しますが、プログラムは依然としてオブジェクトのプロパティにアクセスしようとしています。このエラーを回避するには、いくつかの解決策があります。

  1. インターフェースの戻り状況を確認する

axios を使用してリクエストを送信する場合、戻り結果を次のように処理できます。 then() メソッド。ただし、インターフェースが undefine を返した場合、then() メソッドで判定しても「unknown のプロパティ 'xxx' を読み取れません」というエラーが発生します。

したがって、axios を使用する場合は、インターフェースから返される状況を確認することに注意する必要があります。 console.log() ステートメントを使用して、返された結果を出力し、未定義の状況が存在するかどうかを確認します。

  1. 属性が存在するかどうかを判断する

インターフェースから返された結果がオブジェクトであることを確認した場合、オブジェクトのプロパティにアクセスする前に定義判断を行うのが最善です。オブジェクト。例:

axios.get('/api/data')
  .then(response => {
    if(response.data && response.data.xxx) {
      // ...处理逻辑
    }
  })
ログイン後にコピー

このように、インターフェイスが unknown を返したとしても、プログラムはプロパティにアクセスするときに判断し、エラーを回避します。

  1. デフォルト値を設定します

開発中、インターフェイスから返されるデータが空である場合があり、そのデータをプログラムで使用する必要があります。このとき、「未定義のプロパティ 'xxx' を読み取れません」エラーを回避するためにデフォルト値を設定できます。例:

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;
      });
  }
}
ログイン後にコピー

上記のコードでは、デフォルト値 (this.list = response.data || []) を設定することにより、インターフェイスが未定義を返した場合でも、プログラムは正常に実行され、表示されなくなります。 「未定義のプロパティ 'xxx' を読み取れません」エラー。

概要

Vue アプリケーションで axios を使用すると、「未定義のプロパティ 'xxx' を読み取れません」エラーが発生します。これは通常、インターフェイスが未定義を返し、プログラムが未定義のプロパティにアクセスするためです。判断力の欠如が原因です。このエラーを回避するには、インターフェイスの戻りステータスをチェックし、属性が存在するかどうかを判断し、プログラムが正常に動作するようにコードにデフォルト値を設定する必要があります。

以上がVue アプリケーションで axios を使用しているときに、「TypeError: Cannot read property 'xxx' of unknown」というメッセージが表示された場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート