聊聊在 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/。

使用 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组件。这是您访问项目主页时呈现的内容。

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