在 Svelte 获取数据的小技巧

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

我们将构建一个示例应用程序来交互和显示由 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/。

使用