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

Vue での非同期データのリクエストとプレゼンテーションの処理方法

Vue は、Web アプリケーション プログラムを構築するための宣言型の方法を提供する人気のある JavaScript フレームワークです。開発プロセスでは、多くの場合、非同期リクエストを処理してデータを表示する必要があります。この記事では、Vue で非同期データのリクエストと表示を処理する方法を紹介し、具体的なコード例を示します。

1. Axios を使用して非同期リクエストを送信する

Vue では、Axios ライブラリを使用して非同期リクエストを送信できます。 Axios は、ブラウザーと Node.js で使用できる Promise ベースの HTTP クライアントです。

まず、プロジェクトに Axios をインストールする必要があります。 npm または Yarn コマンドを使用してインストールできます。

npm install axios

または

yarn add axios

インストールが完了したら、Vue コンポーネントで Axios を使用して非同期リクエストを送信できます。

ユーザー リストを取得するためのインターフェイス アドレス /api/users があると仮定します。以下は、Axios を使用して GET リクエストを送信し、データを表示する例です:

// 导入Axios
import axios from 'axios'

export default {
  data() {
    return {
      users: [] // 用于存储用户列表数据
    }
  },
  mounted() {
    // 发送GET请求
    axios.get('/api/users')
      .then(response => {
        // 请求成功后更新数据
        this.users = response.data
      })
      .catch(error => {
        // 请求失败，处理错误
        console.error(error)
      })
  }
}

上の例では、最初に Axios ライブラリをインポートし、次にコンポーネントの mounted ライフサイクル メソッドで GET リクエストを送信しました。リクエストが成功すると、応答データを users 配列に割り当てます。これにより、テンプレート内の users を使用してデータを表示できるようになります。

2. 非同期リクエストの処理時の読み込みステータス

実際のアプリケーションでは、リクエストの送信時に読み込みステータスを表示する必要があることがよくあります。 # 読み込みステータスを確認するコマンド。読み込みステータスの例を次に示します。 <pre class='brush:javascript;toolbar:false;'>export default { data() { return { users: [], // 用于存储用户列表数据 loading: false // 用于记录加载状态 } }, mounted() { // 在发送请求之前将加载状态设置为true this.loading = true // 发送GET请求 axios.get('/api/users') .then(response =&gt; { // 请求成功后更新数据 this.users = response.data }) .catch(error =&gt; { // 请求失败，处理错误 console.error(error) }) .finally(() =&gt; { // 无论请求成功还是失败，最终都将加载状态设置为false this.loading = false }) } }</pre> 上の例では、読み込みステータスを記録するために

loading

という名前のブール型プロパティを追加しました。リクエストを送信する前に、loading を true に設定して、データがロードされていることを示します。リクエストが完了した後の finally ブロックでは、リクエストが成功したか失敗したかに関係なく、loading が最終的に false に設定されます。 テンプレートでは、

v-if

ディレクティブを使用して、loading の値に基づいて読み込みステータスを表示できます。以下はテンプレートの例です。 <pre class='brush:html;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;div v-if=&quot;loading&quot;&gt;加载中...&lt;/div&gt; &lt;div v-else&gt; &lt;ul&gt; &lt;li v-for=&quot;user in users&quot; :key=&quot;user.id&quot;&gt;{{ user.name }}&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt;</pre> 上記の例では、

v-if

ディレクティブを使用して、loading の値が ## であるかどうかを判断します。 #true、はいの場合は「読み込み中...」を表示し、それ以外の場合はユーザーリストを表示します。 概要

Vue での非同期データ リクエストの処理と表示は非常に簡単です。 Axios を使用して非同期リクエストを送信し、コンポーネントのデータ属性に応答データを保存し、テンプレート内のバインディング命令を使用してデータを表示できます。

同時に、

v-if

ディレクティブを使用して、読み込みステータスまたは読み込みステータスに応じたデータを表示できます。

loadingの値を設定することで、ローディングステータスの表示を切り替えます。 この記事が、Vue での非同期リクエストの処理とデータの表示に役立つことを願っています。ご質問やご不明な点がございましたら、お気軽にメッセージを残してください。できる限りお答えいたします。

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