在Svelte中获取数据的教程本教程探讨了如何在你的Svelte应用程序中消费和渲染来自API的数据。你可以使用Axio

本教程探讨了如何在你的Svelte应用程序中消费和渲染来自API的数据。你可以使用Axios、Apisauce、JavaScript的本地Fetch API或你选择的任何HTTP客户端，在onMount() 生命周期钩中与Svelte中的API进行交互。

我们将建立一个示例应用程序，与REST API服务器提供的数据进行交互和显示。这个应用程序将允许用户从REST API中获取博客文章的列表，并在页面上显示。

前提条件

为了学习本教程，你需要有一些JavaScript和CSS的知识，以及对Svelte的一些熟悉。

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

什么是REST API？

API是 "应用程序编程接口 "的缩写，简单地说，它是两个应用程序之间进行通信或分享数据的一种方式。

REST API是一种实现代表状态传输（REST）协议的API类型。REST是一种构建网络服务的架构风格，通过HTTP协议进行交互。REST的请求结构包括四个基本部分，即HTTP方法、一个端点、头文件和请求正文。

HTTP方法

API请求中的HTTP方法告诉服务器，客户端希望它执行什么样的动作。目前最广泛使用的HTTP方法包括GET、POST、PATCH、DELETE，下面简要说明一下。

GETGET：用于从服务器获取或读取信息
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中获取数据的两种方法。首先，我们将研究使用Fetch API，它是JavaScript的本机。然后在下一节中，我们将看看使用Axios客户端，然后再简单地比较和对比这两种方法。

什么是Fetch API？

Fetch API是一种基于承诺的机制，它允许你在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 组件。当你访问项目的主页时，这个组件就会被呈现出来。

正如你所看到的，该组件包含一个<script> 块，用于我们的JavaScript，一个<style> 块，用于我们的样式，以及一个<main> 标签，用于我们的标记。这就是一个Svelte组件的基本结构。

让我们先从Svelte中导入onMount 钩子，像这样。

import { onMount } from "svelte";

Svelte中的onMount 钩子是一个生命周期方法，用于定义一旦使用该钩子的组件在DOM树中首次呈现时应执行的指令。

如果你是React背景的人，你应该注意到Svelte中的onMount 钩子的工作原理类似于基于类的React组件中的componentDidMount() 方法或React功能组件中的useEffect() 钩子。

接下来，我们要定义一个变量来保存我们打算使用的端点的URL。

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

注意：JSONPlaceholder是一个方便的、免费的、在线的REST API，只要你需要一些假数据，就可以使用。

接下来，创建一个posts 变量，并将一个空数组分配给它。

let posts = [];

一旦我们进行调用，这个空的posts 数组就会被我们从API那里收到的数据填满。

最后，我们现在可以利用onMount() 方法，使用JavaScript的Fetch API向端点发出GET 请求，如下所示。

onMount(async function () {
  const response = await fetch(endpoint);
  const data = await response.json();
  console.log(data);
});

当拼凑在一起时，你的App 组件应该包含以下内容。

<script>
  import { onMount } from "svelte";
  const endpoint = "https://jsonplaceholder.typicode.com/posts";
  let posts = [];

  onMount(async function () {
    const response = await fetch(endpoint);
    const data = await response.json();
    console.log(data);
  });

  export let name;
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
  /* ommitted for brevity */
</style>

要检查这是否工作，保存文件，然后访问http://localhost:3000/，并检查浏览器的开发工具。你应该看到一个对象阵列被记录到控制台。

注意：如果你想知道那个export let name; 语句，这就是我们在Svelte中定义props的方式。这里的export 关键字声明了这个值是一个道具，将由组件的父级提供。

继续阅读《如何在Svelte中获取数据》（SitePoint）。

在Svelte中获取数据的教程