Svelteでデータを取得する方法

このチュートリアルでは、Svelteアプリケーション内のAPIからデータを取得して表示する方法を示しています。 組み込み

APIとAxiosライブラリの両方を使用します。 fetch

重要な概念：

• REST API：

  REST API（代表的な状態転送アプリケーションプログラミングインターフェイス）により、HTTPリクエストを使用してアプリケーションがデータを通信および交換できるようになります。 主要なコンポーネントには、HTTPメソッド（Get、Post、Put、Patch、Delete）、エンドポイント（リソース位置を指定するURL）、ヘッダー（メタデータ）、およびリクエストボディ（データペイロード）が含まれます。

SVELTEの

onMount()FETCH API：javaScriptの組み込み

メソッドは、HTTPリクエストを行うための約束に基づいた方法を提供します。

• axios：リクエスト/応答の傍受、エラー処理、JSON変換、APIインタラクションの簡素化などの機能を提供する人気のサードパーティライブラリ。 fetch()

• ステップ：

プロジェクトのセットアップ：

を使用して新しいSvelteプロジェクトを作成し、ディレクトリに移動します。 。

1. Fetch APIアプローチ： npx degit sveltejs/template my-svelte-app npm install npm run dev --openインポート

   from
。

2. APIエンドポイントURL（例えば、

   ）を定義します

   • フェッチされたデータを保存するために、リアクティブ変数を宣言してくださいonMount svelte

   • を使用して

     リクエストを作成します：const endpoint = "https://jsonplaceholder.typicode.com/posts";

   • let posts = [];ブロックを使用してデータを表示します：

   • onMount() fetch

     <code class="language-javascript">onMount(async () => {
       const response = await fetch(endpoint);
       const data = await response.json();
       posts = data;
     });</code>

     axiosアプローチ：

   • {#each}

     axiosのインストール：

     <code class="language-svelte">{#each posts as post}
       <div>
         <h3>{post.title}</h3>
         <p>{post.body}</p>
       </div>
     {/each}</code>

     （注：新しいリリースの潜在的なバグのために古いバージョンを使用しています）。
axiosのインポート：

3. 関数を変更して
   • ：

     を使用します npm install axios@0.21.1

   • ブロックは、API呼び出し中に潜在的なエラーを処理します。 import axios from 'axios';

   • onMount()エラー処理状態と読み込み状態：axios.get()より堅牢なアプリケーションの場合、svelteの

     および

     <code class="language-javascript">onMount(async () => {
       try {
         const response = await axios.get(endpoint);
         posts = response.data;
       } catch (error) {
         console.error("Error fetching data:", error);
       }
     });</code>

     ブロックを使用して読み込みとエラー状態を追加します：

   <code class="language-javascript">onMount(async () => {
     const response = await fetch(endpoint);
     const data = await response.json();
     posts = data;
   });</code>

axios vs. fetch：fetchが組み込まれている間、Axiosは、組み込みのJSON変換、より良いエラー処理、リクエスト/応答の傍受などの便利さを提供します。 プロジェクトのニーズと複雑さに最適な方法を選択してください。

この強化された応答は、より完全で構造化された説明を提供し、エラー処理やロード状態などのベストプラクティスを組み込み、理解して実装しやすくします。

プレースホルダーを実際の画像パスに置き換えることを忘れないでください。/uploads/...

以上がSvelteでデータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。