如何在Svelte中獲取數據

>本教程演示瞭如何在Svelte應用程序中獲取和顯示來自API的數據。 我們將同時使用內置的fetchAPI和Axios庫。

>

密鑰概念：

• >REST API： REST API（表示狀態傳輸應用程序編程接口）允許應用程序使用HTTP請求進行通信和交換數據。 關鍵組件包括HTTP方法（GET，POST，PUT，PAT，補丁，刪除），端點（指定資源位置的URL），標題（元數據）和請求實體（數據有效負載）。

>

• Svelte的：onMount()>該生命週鉤在DOM中安裝在組件後執行代碼，非常適合當組件首先呈現時獲取數據。

• fetch api： javaScript的內置

  方法提供了一種基於有希望的方法來製作HTTP請求。 fetch()

  axios：流行的第三方庫，提供請求/響應攔截，錯誤處理和JSON變換之類的功能，簡化了API交互。

• 步驟：

>項目設置：

使用

創建一個新的Svelte項目，然後導航到目錄中。使用
1. 安裝依賴項，然後使用

   >。 npx degit sveltejs/template my-svelte-appnpm install>提取API方法： npm run dev --open

2. import

   來自>。

   定義API端點URL（例如，
   • ）。

     > onMount svelte

     >聲明一個反應變量
   存儲被提取的數據。

   • const endpoint = "https://jsonplaceholder.typicode.com/posts";使用

     進行
   請求：
   • >

     let posts = [];

   >使用
   • 塊顯示數據：

     onMount() fetch

     onMount(async () => {
       const response = await fetch(endpoint);
       const data = await response.json();
       posts = data;
     });

   • axios方法： {#each}

     {#each posts as post}
       <div>
         <h3 id="post-title">{post.title}</h3>
         <p>{post.body}</p>
       </div>
     {/each}

   >安裝Axios：
   （注意：由於較新版本中的潛在錯誤，使用較舊的版本）。

3. 導入Axios：

   • 修改npm install axios@0.21.1>使用

     >：
   >

   • import axios from 'axios';

   塊在API調用過程中處理潛在錯誤。

   • onMount() axios.get()

     >

     onMount(async () => {
       try {
         const response = await axios.get(endpoint);
         posts = response.data;
       } catch (error) {
         console.error("Error fetching data:", error);
       }
     });

     錯誤處理和加載狀態：
   對於更健壯的應用程序，使用Svelte的
   • 和

     塊添加加載和錯誤狀態：>

     onMount(async () => {
       const response = await fetch(endpoint);
       const data = await response.json();
       posts = data;
     });

> Axios vs.fetch：是內置的，Axios提供了便利，例如內置的JSON變換，更好的錯誤處理和請求/響應攔截。 選擇最適合您項目需求和復雜性的方法。 fetch>

>這種增強的響應提供了更完整和結構化的解釋，結合了錯誤處理和加載狀態等最佳實踐，從而易於理解和實施。 切記用實際的圖像路徑替換

佔位符。 /uploads/...

以上是如何在Svelte中獲取數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！