Async/awaitを使用してVUEでデータを取得する場合、最初に作成またはマウントされたフックでリクエストを開始する必要があり、読み込みとエラーのステータス管理を調(diào)整する必要があります。 1。作成は、DOM操作がなく、実行時間が早いシナリオに適しています。 2。マウントは、DOMが必要な狀況に適しています。 3.ユーザーエクスペリエンスを向上させるために、インロードとエラー狀態(tài)を同期して処理する必要があります。 4.テンプレートで非同期メソッドを直接呼び出すことは避けてください。そうすれば、応答性のあるデータバインディングを通じてビューを更新する必要があります。 5. VUE 3では、コンポーネントレベルの非同期負(fù)荷は、サスペンスコンポーネントと組み合わせて処理できますが、通常のデータ要求にライフサイクルフックを使用することをお勧めします。サンプルコードは、マウントされた荷重ステータスとエラープロンプトでASYNC/待望を使用する方法を示しています。

VUEプロジェクトでのデータ収集を処理するためにasync/awaitを使用することは、特にコンポーネントの初期化が必要な場合にインターフェイスからデータを取得する必要があるシナリオでは、明確で実用的な方法です。よく使用すると、コード構(gòu)造がより明確になるだけでなく、維持してデバッグしやすくなります。

作成またはマウントされたAsyncを使用します

createdやmountedなどのVueのライフサイクルフック関數(shù)は、データリクエストをトリガーするために最も一般的に使用される場所です。どちらのフックもasync/awaitで使用できますが、それらは非同期であり、ページレンダリングを自動的にブロックしないことに注意してください。

一般的な提案：

• DOM操作が不要な場合は、実行時間が早いため、 created推奨されます。
• DOMを操作する必要がある場合は、 mountedしてください。

例えば：

 async mounted（）{
  試す {
    const response = await fetchdata（）;
    this.data = response.data;
  } catch（error）{
    console.error（ 'データロードが故障した'、エラー）;
  }
}

注： asyncライフサイクルフックに追加することはできますが、Vueは後続のプロセスを継続する前に完了するのを待たないため、ページレンダリングを「ブロック」することを期待しないでください。

ステータスとエラー処理の読み込みは、同期して維持する必要があります

async/awaitを使用してデータを取得する場合、ユーザーは「読み込み」または「エラー」を知る必要がある場合があります。したがって、リクエストを開始する前にisLoading狀態(tài)を設(shè)定することは良い習(xí)慣です。エラーが発生した場合、対応するプロンプトまたは再試行メカニズムが必要です。

一般的な慣行は次のとおりです。

• isLoading: true 、完了後にfalseに設(shè)定します
• 例外が発生したらerrorステータスを設(shè)定し、エラーメッセージを表示します

例えば：

データ（） {
  戻る {
    アスロード：FALSE、
    エラー：null、
    データ：null
  };
}、
async mounted（）{
  this.isloading = true;
  試す {
    const response = await fetchdata（）;
    this.data = response.data;
  } catch（err）{
    this.error = 'ロードに失敗した、再試行してください';
  } ついに {
    this.isloading = false;
  }
}

このように、ユーザーインターフェイスは、「ロード...」テキスト、エラープロンプトなどの表示など、これらの狀態(tài)に基づいてフィードバックを提供できます。

テンプレートで非同期メソッドを直接呼び出すことは避けてください

テンプレート內(nèi)の非同期メソッドを直接呼び出して、次のようなデータを取得する場合がある場合があります。

 <div> {{fetchdata（）}} </div>

これは実際には良い習(xí)慣ではありません。いくつかの理由があります：

• テンプレートで非同期メソッドを呼び出すと、繰り返しの呼び出しが発生し、パフォーマンスに影響します
• 更新後の時間內(nèi)にインターフェイスにデータを反映することはできません
• エラー処理が難しくなり、ページのクラッシュを簡単に引き起こす可能性があります

これを行う正しい方法は、ライフサイクルフックのデータを事前に準(zhǔn)備し、レスポンシブデータ屬性にバインドしてから、テンプレートで使用することです。

ヒント：サスペンスコンポーネントの組み合わせ（VUE 3）

VUE 3を使用して<Suspense>コンポーネントを使用している場合、非同期データ読み込みプロセスをよりエレガントに処理できます。 <Suspense>タグで非同期コンポーネントまたは非同期データ収集をラップし、 #defaultと#fallbackスロットをそれぞれロードする前後にコンテンツを制御できます。

例：

 <テンプレート>
  <サスペンス>
    <テンプレート#default>
      <asyncdatacomponent />
    </テンプレート>
    <テンプレート#Fallback>
      読み込み...
    </テンプレート>
  </suspense>
</テンプレート>

ただし、この方法は、コンポーネントレベルの非同期負(fù)荷により適しています。それが通常のデータ要求である場合、上記の方法が推奨されます。

基本的にそれだけです。 async/awaitは、Vueで使用するのは複雑ではありませんが、実際に使用するには、ステータス管理とユーザーエクスペリエンスの詳細(xì)に注意を払う必要があります。

以上がVUEでデータを取得する：Async/待ち望んでいるベストプラクティスの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。