如何在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

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

   • axios方法： {#each}

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

   >安装Axios：
   （注意：由于较新版本中的潜在错误，使用较旧的版本）。

3. 导入Axios：

   • 修改npm install axios@0.21.1>使用

     >：
   >

   • import axios from 'axios';

   块在API调用过程中处理潜在错误。

   • onMount() axios.get()

     >

     <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>

     错误处理和加载状态：
   对于更健壮的应用程序，使用Svelte的
   • 和

     块添加加载和错误状态：>

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

> Axios vs.fetch：是内置的，Axios提供了便利，例如内置的JSON变换，更好的错误处理和请求/响应拦截。 选择最适合您项目需求和复杂性的方法。fetch>

>这种增强的响应提供了更完整和结构化的解释，结合了错误处理和加载状态等最佳实践，从而易于理解和实施。 切记用实际的图像路径替换

占位符。/uploads/...

以上是如何在Svelte中获取数据的详细内容。更多信息请关注PHP中文网其他相关文章！