Vue3 非同期データ読み込みコンポーネントサスペンスの使い方

Vue3 非同期データ読み込みコンポーネントサスペンスの使い方

序文

Vue3 には多くの注目すべき機能が追加されましたが、サスペンス コンポーネントもその 1 つです。これは非同期リクエスト データを処理するのに非常に実用的です。この記事では、簡単な例を通してその使い方を紹介します。興味がある場合は、公式ドキュメントを参照してください。

コンポーネントが正しくレンダリングされる前に、何らかの非同期リクエストを実行する必要があることはよくあります。これは通常、開発者がこれを処理するために設計したメカニズムによって処理されます。これを行うには多くの優れた方法があります。

たとえば、API から非同期的にデータを取得し、応答データが解析されるときに読み込み効果などの情報を表示する場合は、Vue3 の suspense コンポーネントを使用してそのような要件を実行できます。

コンポーネントの作成

コンポーネントを作成し、Peoples.vue という名前を付けます。そのコンポーネント コードは次のとおりです。

<テンプレート>
    <div v-for="(people, index) in peoples.results" :key="index">
        {{ people.name }} {{ people.birth_year }}
    </div>
</テンプレート>
<スクリプト>
"vue" から { ref } をインポートします。
エクスポートデフォルト{
    名前: 「CyPeoples」、
    非同期セットアップ() {
        const peoples = ref(null);
        const ヘッダー = { "Content-Type": "application/json" };
        const fetchPeoples = fetch("https://swapi.dev/api/people", { を待機します。
            ヘッダー、
        });
        peoples.value = fetchPeoples.json() を待機します。
        { 人々 } を返します。
    },
};
</スクリプト>

ここで、コンポーネント状態の反応性を保証するために ref が導入されています。したがって、上記のコード スニペットによれば、ムービー データは非同期 API 呼び出しを通じて取得されます。
VUE プロジェクトで HTTP リクエストを開始するには、通常 Axios が使用されます。ここでは fetch を使用します。

さて、サスペンスを使用してアプリケーションに読み込み情報を表示してみましょう。

App.vue ファイルを変更して、コードを次のようにします。

<テンプレート>
    <div>
        <h1>スターウォーズのキャラクター</h1>
    </div>
    <サスペンス>
        <テンプレート #デフォルト>
            <サイピープルズ />
        </テンプレート>
        <テンプレート #フォールバック>
            <div>
                <h3>データを読み込んでいます...</h3>
            </div>
        </テンプレート>
    </サスペンス>
</テンプレート>
<スクリプト>
「./components/Peoples.vue」からCyPeoplesをインポートします。
「vue」から { suspense } をインポートします。
エクスポートデフォルト{
    名前:「アプリ」、
    コンポーネント:
        サイピープルズ、
        サスペンス、
    },
};
</スクリプト>

上記のコード スニペットから、非同期リクエストが完了した後に UI を表示するための初期化テンプレート コンポーネントとして #default を使用し、サスペンス コンポーネントを使用して読み込み効果を簡単に実現できます。 #fallback は、非同期リクエスト内の処理 UI であり、一般的な読み込み効果です。

要約する

サスペンス コンポーネントは、非同期リクエスト UI の処理ロジックを簡素化する Vue3 の新機能です。

Vue3 非同期データ読み込みコンポーネントサスペンスに関するこの記事はこれで終わりです。Vue3 非同期データ読み込みコンポーネントサスペンスに関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3.0+vite2は動的非同期コンポーネントの遅延読み込みを実装します
  • Vue の動的コンポーネントと非同期コンポーネントの詳細な理解
  • Vueはオンデマンドのコンポーネント読み込みと非同期コンポーネント機能を実装します
  • Vueの動的コンポーネントと非同期コンポーネントの詳細な説明
  • Vueコンポーネント開発における非同期コンポーネントの詳細な説明

<<:  Windows 環境での MySQL 8.0 のインストール、設定、アンインストール

>>:  VMware Workstation Pro は Win10 ピュア バージョンのオペレーティング システムをインストールします

推薦する

nginx をシャットダウン/再起動/起動する方法

閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...

MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル

MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...

vue3.0共通コンポーネントの自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

CentOS7 での PostgreSQL 11 の詳細なインストールと設定のチュートリアル

1. 公式ウェブサイトアドレス公式サイトではインストールの参考手順が紹介されています。公式サイトを見...

Vueのウォッチリスナーの使い方を説明する記事

目次リスナーウォッチ形式リスナーを設定します。要約するリスナーウォッチ関数名は、リッスンする要素の名...

MySqlのインストールとアンインストールに関する詳細なチュートリアル

この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...

JavaScript でオブザーバー パターンを実装する方法

目次概要オブザーバーパターンの応用シナリオオブザーバーパターンの実装要約する概要オブザーバー パター...

Ubuntu MySQL バージョンが 5.7 にアップグレードされました

数日前、図書館はサーバー(Ubuntu 14.04)にセキュリティ上の脆弱性があり、時間通りに修復さ...

Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法

ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...

Linux でユーザーをグループに追加する 4 つの方法の概要

序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...

全画面ページのスクロール効果を実現するJavaScript

JavaScript DOM を読み終えた後、解釈型 JavaScript スクリプト言語に対する...

docker に基づいて nginxssl 設定を開始する

前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...

js キャンバスはスライダー検証を実現します

この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...

CentOS6.5にpython3.7をインストールする詳細な手順

1. Python 3をダウンロードする https://www.python.org/ftp/py...