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 をよろしくお願いいたします。