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 ピュア バージョンのオペレーティング システムをインストールします

推薦する

リアルタイムクロックを実装するネイティブJS

ネイティブ JS で実装したリアルタイム クロック エフェクトを共有します。エフェクトは以下のとおり...

Linux のプロセスクラッシュの原因をコアダンプ技術を使用して追跡する簡単な分析

最近、プロジェクトで問題が発生しました。サーバー側のプログラムが突然クラッシュして終了しました。クラ...

Ubuntu 19.10 で ssh サービスを有効にする (詳細なプロセス)

Ubuntuでsshを開くのに1時間以上かかりました。主な原因は、最初に読んだチュートリアルの手順...

アイデアをDockerに接続してワンクリックでデプロイする方法

1. docker設定ファイルを変更し、ポート2375を開きます。 [root@s162 docke...

MySQL 8.0 の新機能 - 管理ポートの使用の概要

目次序文接続管理追加の接続管理ポート要約する序文皆さんの多くは、次のようなエラー メッセージに遭遇し...

Dockerでudpポート番号を指定する問題を解決する

Docker はコンテナを起動するときにアクセス ポートを指定します。複数の -p オプションを使用...

MySQL の指定文字によるマージと分割の例のチュートリアル

序文指定した文字による結合または分割は一般的なシナリオです。MySQL では結合の記述は比較的簡単で...

MySQL 5.7 で my.ini ファイルが見つからない場合の解決策

my.ini とは何ですか? my.ini は、MySQL データベースで使用される設定ファイルです...

Linux システムで IPv6 をサポートするように Nginx を設定する方法

1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...

Docker で Redis クラスターを素早く構築する方法の例

Redis クラスターとはRedis クラスターは、R​​edis が提供する分散データベース ソリ...

小さなアイコンのフロントエンド処理ソリューションのグラフィカルな説明

序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...

Vue2.0の双方向データバインディング原則を手動で実装する

一言で言えば: データハイジャック (Object.defineProperty) + パブリッシュ...

Youdaの新しいプチビューの実装

目次序文導入ライブ使いやすいルートスコープマウント要素の指定ライフサイクルコンポーネントグローバル状...

MySQL で不明なフィールド名を回避する方法

序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...

面接官がmysqlのcharとvarcharの違いを尋ねたとき

目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...