本教程探讨如何在 Svelte 应用程序中的使用和呈现来自 API 的数据。您可以使用 Axios、Apisauce、JavaScript 的原因 Fetch API 或您选择的任何 HTTP 客户端在生命周期挂钩中与 Svelte 中的 API 进行交互。

成都创新互联于2013年开始，是专业互联网技术服务公司，拥有项目成都网站制作、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元大田做网站,已为上家服务,为大田各地企业和个人服务,联系电话:13518219792

我们将构建一个示例应用程序来交互和显示由 REST API 服务器提供的数据。此应用程序将允许用户从 REST API 获取博客文章列表并将其显示在页面上。

先决条件

为了学习本教程，您需要具备一些知识 JavaScript 和 CSS 的先验知识，以及对Svelte的一些熟悉。

您还需要在您的机器上安装Node 和 npm以及Git。

什么是 REST API?

首字母缩略词 API 代表“应用程序编程接口”，简单来说，它是两个应用程序通信或相互共享数据的一种方式。

REST API 是一种实现代表性状态传输 (REST) 协议的 API。REST 是一种用于构建通过 HTTP 协议交互的 Web 服务的架构风格。REST 的请求结构包括四个基本部分，分别是 HTTP 方法、端点、标头和请求正文。

HTTP 方法

API 请求中的 HTTP 方法告诉服务器客户端期望它执行什么样的操作。当今最广泛使用的是 HTTP 方法包括 GET、POST、PATCH、DELETE，下面将对其进行简要说明。

• GET：用于从服务器获取或读取信息。
• POST：用于在服务器中创建或存储记录。
• PUT/ PATCH：用于更新或修补服务器中的记录。
• DELETE：用于从一个资源点删除一条或多条记录。

HTTP 端点

基本术语中的 HTTP 端点是一个地址或 URL，它指定 API 可以在何处访问一个或多个资源。

HTTP 标头

HTTP 标头是键值对，允许客户端在请求中将信息传递给服务器，反之亦然。

请求正文

API 调用的主体是从客户端发送到服务器的有效负载(或数据)。

设置我们的 Svelte 应用程序

我们将构建一个与外部 REST API 交互以从服务器获取博客文章列表的示例应用程序。然后，我们将在 Svelte 客户端上显示此列表。

在本教程中，我们不会深入探讨 Svelte 应用程序的捆绑和基础架构，因此我们将按照Svelte 官方网站上的说明来启动和运行应用程序。

在您的首选目录中，运行：

npx degit sveltejs/template svelte-demo-app

然后，进入文件夹，使用 npm 安装所需的依赖项并启动开发服务器：

cd svelte-demo-app
npm install
npm run dev --open

您现在应该会看到“Hello, World!” 在浏览器中显示的消息http://localhost:5000/。

使用 Fetch API 使用 REST API

在本文中，我们将研究从 API 获取数据的两种方法。首先，我们将了解如何使用 JavaScript 原生的 Fetch API。然后在下一节中，我们将看看使用 Axios 客户端，然后简要比较和对比这两种方法。

什么是获取 API?

Fetch API 是一种基于 Promise 的机制，允许您向 JavaScript 中的端点发出异步 API 请求。如果您熟悉该XMLHttpRequest()方法，您可能会同意 Fetch API 是一种改进——从某种意义上说，它提供了额外的功能，例如数据缓存、读取流响应的能力等等。

使用 Fetch API 就像使用fetch()您要获取的资源的路径作为必需参数调用方法一样简单。例如：

const response = fetch('your-api-url.com/endpoint');

在请求中传递更多参数

该fetch()方法还允许您通过将init对象作为可选的第二个参数传递来更具体地处理您正在发出的请求。

该init对象允许您在请求中传递额外的详细信息。其中最常见的如下所列：

• method: 一个字符串，它指定发送到服务器的 HTTP 方法，可以是 GET、POST、PUT、PATCH 或 DELETE 之一。
• cache：一个字符串，指定是否应缓存请求。允许的选项是default, no-cache, reload, force-cache, only-if-cached。
• headers: 用于设置与请求示例一起传递的标头的对象。
• body: 中最常用的对象POST，PUT或PATCH请求。它允许您将有效负载传递给服务器。

构建App组件

完成 Svelte 脚手架后，打开src文件夹并找到App.svelte组件。这是您访问项目主页时呈现的内容。

如您所见，该组件包含一个

Hello {name}!

Visit the Svelte tutorial to learn how to build Svelte apps.

要检查它是否正常工作，请保存文件，然后访问http://localhost:3000/并检查浏览器的开发工具。您应该会看到记录到控制台的一组对象。

注意：如果您想知道该export let name;声明，这就是我们在 Svelte 中定义道具的方式。此处的export关键字声明此值是组件的父级将提供的道具。

显示来自端点的数据

现在我们已经能够成功地从端点提取数据，是时候在我们的页面上呈现内容了。我们可以使用each 块来做到这一点：

{#each posts as article}
  

    
{article.title}

  

{/each}

将标记更改App.svelte为以下内容：

  
Hello {name}!

  
Visit the Svelte tutorial to learn how to build Svelte apps.

  {#each posts as article}
    

      
{article.title}

    

  {/each}

然后将以下行添加到脚本块：

posts = data;

您现在应该会看到呈现到页面的帖子标题列表。

使用 Axios 客户端使用 REST API

Axios是一个开源的、基于 Promise 的 JavaScript 库，用于进行与 Fetch API 非常相似的 API 调用。Axios 提供了一些特定的方法来执行各种 API 请求。例如：

• axios.get()用于向端点发出 GET http 请求。
• axios.post()用于在创建记录时发出 POST 请求。
• 当您需要发出 HTTP 请求以更新 API 中的记录时，可以使用axios.patch()和axios.put()。
• axios.delete()用于向端点发送 HTTP DELETE 请求。

安装 Axios 并更新App组件

要在我们的项目中使用 Axios，我们首先需要安装它。在项目根目录中，运行：

npm i axios@0.21.1

注意：我在这里安装了一个稍旧的版本，因为该库的最新版本引入了一个错误，这会导致在TypeError: Cannot convert undefined or null to objectSvelte 组件中使用 Axios 时出错。见这里和这里。希望这将由库的未来版本修复。

然后，在App组件中，包含库：

import axios from "axios";

还可以像这样更改onMount钩子中的代码：

onMount(async function () {
  const response = await axios.get(endpoint);
  console.log(response.data);
  posts = response.data;
});

您应该会在浏览器中看到与之前相同的结果。

错误处理

由于 Ajax 请求是在异步函数中发出的，我们需要使用一个try … catch块来报告任何错误：

onMount(async function () {
  try {
    const response = await axios.get(endpoint);
    console.log(response.data);
    posts = response.data;
  } catch (error) {
    console.error(error);
  }
});

这不是 Axios 独有的。在使用 Fetch API 时，您将应用相同的方法。

Axios 中的分组请求

Axios 的一个不错的功能是您可以使用该axios.all()方法同时向多个端点发出 HTTP 请求。此方法将一组请求作为一个数组接收，并返回一个单一的 Promise 对象，该对象仅在传入的数组的请求已被单独解析时才解析。

执行此操作的语法如下面的代码片段所示：

axios.all([
  axios.get("https://jsonplaceholder.typicode.com/posts"),
  axios.get("https://jsonplaceholder.typicode.com/comments"),
])
.then((responseArr) => {
  //this will be executed only when all requests are complete
  console.log("First Post: ", responseArr[0].data[0].title);
  console.log("Second Comment: ", responseArr[1].data[1].body);
})
.catch((error) => {
  console.log(error);
});

在这里(为了变化)我链接了使用then()和使用的方法catch()来处理错误。

Axios 与 Fetch

与 相比fetch()，Axios 附带了一些额外的附加功能，例如：

• 请求和响应拦截。
• 更好的简化错误处理过程。
• XSRF 保护。
• 上传进度支持。
• 响应超时。
• 取消请求的能力。
• 支持旧版浏览器。
• 自动 JSON 数据转换。

此外，Axios 可以在浏览器和 Node.js 中使用。这有助于在浏览器和后端之间共享 JavaScript 代码或对前端应用程序进行服务器端渲染。

您可以在此处了解一些进一步的差异。

结论

我们在本次演练中介绍了很多内容。我们首先要了解什么是 REST API，以及为什么您可能希望在应用程序中使用外部服务。onMount然后我们建立了一个 Svelte 项目并使用 Fetch API 从一个使用 Svelte方法的虚拟 API 中间提取文章列表。最后，我们查看了一下 Axios HTTP 库，然后重写了我们的脚本以使用 Axios 而不是 Fetch API 使用我们的模拟 API。

当前文章：聊聊在Svelte获取数据的小技巧
路径分享：http://www.shufengxianlan.com/qtweb/news30/267330.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联