Vue で非同期データのリクエストとレスポンスを処理する方法

Vue で非同期データのリクエストとレスポンスを処理する方法

Vue では、データを取得するためにサーバーと対話する必要があることが多く、通常は非同期リクエストを使用します。サーバーから返されたデータを取得します。この記事では、Vue で非同期データのリクエストと応答を処理する方法を紹介し、具体的なコード例を示します。

非同期リクエストを送信する

Vue で非同期リクエストを送信するには、通常、axios ライブラリを使用してネットワーク リクエストを作成します。まず、プロジェクトに axios ライブラリをインストールする必要があります。コマンド ラインで次のコマンドを実行します。

npm install axios

インストールが完了したら、非同期リクエストを送信する必要があるコンポーネントで、次のコードを使用して axios ライブラリをインポートできます。 ##

import axios from 'axios';

axios ライブラリを使用して非同期リクエストを送信します。たとえば、サーバーにユーザー リスト データの取得をリクエストする場合、コンポーネントの created フック関数でリクエストを送信できます。

export default {
  data() {
    return {
      userList: []
    };
  },
  created() {
    axios.get('/api/user-list')
      .then(res => {
        this.userList = res.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

メソッドは GET リクエストを送信します。リクエストされたアドレスは /api/user-list です。次に、成功したリクエストの応答を .then() メソッドを通じて処理し、返されたユーザー リスト データを userList 属性に保存します。リクエストが失敗した場合は、エラーをキャプチャし、.catch() メソッドを通じて処理できます。 非同期データの表示

非同期リクエストのデータを正常に取得したら、そのデータを Vue テンプレートで使用できます。以下は、テンプレートで非同期データを表示する方法を示す簡単な例です。

<script>
export default {
  data() {
    return {
      userList: []
    };
  },
  created() {
    axios.get('/api/user-list')
      .then(res =&gt; {
        this.userList = res.data;
      })
      .catch(error =&gt; {
        console.log(error);
      });
  }
}
</script>

上記のコードでは、

ディレクティブを使用して、userList 内の各項目を変換します。 ユーザー情報は <li> 要素にレンダリングされ、ユーザー名は補間式 {{ user.name }} を使用して表示されます。 非同期リクエスト エラーの処理

非同期リクエスト プロセス中に、ネットワーク エラー、サーバー例外などのエラーが発生する可能性があります。より良いユーザー エクスペリエンスを提供するために、Vue でこれらのエラーを処理し、対応するプロンプトを表示できます。以下は、非同期リクエストのエラーを処理する方法を示す簡単なサンプル コードです。

<template>
  <div>
    <button @click="fetchData">获取用户列表</button>
    <ul v-if="userList.length">
      <li v-for="user in userList" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
    <p v-else-if="loading">加载中...</p>
    <p v-else>获取数据失败</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [],
      loading: false
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('/api/user-list')
        .then(res => {
          this.userList = res.data;
          this.loading = false;
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
        });
    }
  }
}
</script>

上記のコードでは、ボタン

を追加しました。ユーザーがボタン fetchData メソッドをクリックします。データを取得する前に、loading 属性を true に設定し、loading の値に基づいてテンプレートに Loading...## を表示します。 ＃ チップ。データが正常に取得された場合は、返されたデータに userList 属性を割り当て、loading を false に設定します。データ取得が失敗した場合は、テンプレートに データ取得失敗 プロンプトが表示され、loading が false に設定されます。 要約すると、この記事では、Vue で非同期データのリクエストと応答を処理する方法を紹介し、具体的なコード例を示します。上記のコードを通じて、非同期リクエストをより適切に管理し、ユーザー エクスペリエンスを向上させることができます。

以上がVue で非同期データのリクエストとレスポンスを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。