本教程探讨了如何在Svelte应用程序中使用和呈现来自API的数据。您可以使用Axios、Apisauce、JavaScript的FetchAPI或您选择的任何HTTP客户端在生命周期挂钩中与Svelte中的API进行交互。我们将构建一个示例应用程序来交互和显示RESTAPI服务器提供的数据。此应用程序将允许用户从RESTAPI获取博客文章列表并将它们显示在页面上。先决条件为了学习本教程，您需要具备一些JavaScript和CSS的先验知识，并熟悉Svelte。您还需要在计算机上安装Node、npm和Git。什么是RESTAPI？首字母缩略词API代表“应用程序编程接口”，简单来说，它是两个应用程序相互通信或共享数据的一种方式。RESTAPI是实现具象状态传输(REST)协议的API。REST是一种架构风格，用于构建通过HTTP协议进行交互的Web服务。REST的请求结构由四个基本部分组成，即HTTP方法、端点、标头和请求文本。HTTP方法API请求中的HTTP方法告诉服务器客户端希望它做什么。当今使用最广泛的HTTP方法包括GET、POST、PATCH、DELETE，下面将对其进行简要说明。GET：用于从服务器获取或读取信息。POST：用于在服务器中创建或存储一条记录。PUT/PATCH：用于更新或修补服务器中的记录。DELETE：用于从资源点中删除一条或多条记录。基本术语中的HTTP端点是一个地址或URL，它指定API可以访问一个或多个资源的位置。HTTP标头HTTP标头是键值对，允许客户端在请求中将信息传递给服务器，反之亦然。请求文字API调用的主体是从客户端发送到服务器的有效负载（或数据）。设置我们的Svelte应用程序我们将构建一个与外部RESTAPI交互的示例应用程序，以从服务器获取博客文章列表。然后我们将在Svelte客户端上显示此列表。在本教程中，我们不会深入探讨Svelte应用程序的捆绑和基础架构，因此我们将按照Svelte官方网站上的说明启动并运行应用程序。在您的首选目录中，运行：npxdegitsveltejs/templatesvelte-demo-app然后，进入该文件夹，使用npm安装所需的依赖项并启动开发服务器：cdsvelte-demo-appnpminstallnpmrundev--打开您现在应该看到“Hello,World!”消息显示在浏览器中的http://localhost:5000/。使用FetchAPI使用RESTAPI在本文中，我们将研究两种从API中获取数据的方法。首先，我们将了解如何使用JavaScript的原生FetchAPI。然后在下一节中，我们将了解如何使用Axios客户端，然后简要比较和对比这两种方法。什么是获取API？FetchAPI是一种基于Promise的机制，允许您在JavaScript中向端点发出异步API请求。如果您熟悉XMLHttpRequest()方法，您可能会同意FetchAPI是一种改进——从某种意义上说，它提供了额外的功能，例如数据缓存、读取流响应的能力等等.使用FetchAPI就像调用fetch()方法一样简单，并将您要获取的资源的路径作为必需参数。例如：constresponse=fetch('your-api-url.com/endpoint');在请求中传递更多参数fetch()方法还允许您通过将init对象作为可选的第二个参数传递来更改参数请具体说明您发出的请求。init对象允许您在请求中传递其他详细信息。下面列出了其中最常见的：method：指定发送到服务器的HTTP方法的字符串，可以是GET、POST、PUT、PATCH或DELETE之一。缓存：一个字符串，指定是否应缓存请求。允许的选项是默认、无缓存、重新加载、强制缓存、仅当缓存。headers：一个对象，用于设置随请求实例传递的标头。body：POST、PUT或PATCH请求中最常用的对象。它允许您将有效负载传递给服务器。构建App组件完成Svelte的脚手架后，打开src文件夹并找到App.svelte组件。这是您访问项目主页时呈现的内容。如您所见，该组件包含一个用于我们的JavaScript的import{onMount}from"svelte";constendpoint="https://jsonplaceholder.typicode.com/posts";让帖子=[];onMount(asyncfunction(){constresponse=awaitfetch(endpoint);constdata=awaitresponse.json();console.log(data);});exportletname;你好{name}！
访问Svelte教程学习如何构建Svelte应用程序。
要检查它是否有效，请保存文件，然后访问http://localhost:3000/并检查浏览器开发工具。您应该看到一组记录到控制台的对象。注意：如果您想知道exportlet名称；声明，这就是我们在Svelte中定义props的方式。此处的export关键字声明此值是组件的父级将提供的prop。从端点显示数据现在我们已经成功地从端点提取数据，是时候在我们的页面上呈现内容了。我们可以对每个块执行此操作：{#eachpostsasarticle}
{/each}将App.svelte中的标记更改为以下内容：
你好{name}！
访问Svelte教程了解如何构建Svelte应用。
{#eachpostsasarticle}{/each}然后将以下行添加到脚本块：posts=data;您现在应该看到呈现到页面的帖子标题列表。将RESTAPI与Axios客户端一起使用Axios是一个开源的、基于Promise的JavaScript库，用于进行与FetchAPI非常相似的API调用。axios提供了一些特定的方法来执行各种API请求。例如：axios.get()用于向端点发出GEThttp请求。axios.post()用于在创建记录时发出POST请求。当您需要发出HTTP请求来更新API中的记录时，您可以使用axios.patch()和axios.put()。axios.delete()用于向端点发送HTTPDELETE请求。安装Axios并更新App组件要在我们的项目中使用Axios，我们首先需要安装它。在项目根目录下，运行：npmiaxios@0.21.1注意：我这里安装了一个稍微老一点的版本，因为最新版本的库引入了一个bug，会导致TypeError:CannotconvertundefinedornullErrorusingAxiosintoobjectSvelte组件。看这里和这里。希望这将由库的未来版本修复。然后，在App组件中，包含库：importaxiosfrom"axios";还要像这样更改onMount挂钩中的代码：onMount(asyncfunction(){constresponse=awaitaxios.get(endpoint);console.log(response.data);posts=response.data;});您应该会在浏览器中看到与之前相同的结果。错误处理由于Ajax请求是在异步函数中发出的，因此我们需要使用try...catch块来报告任何错误：onMount(asyncfunction(){try{constresponse=awaitaxios.get(endpoint);console.log(response.data);posts=response.data;}catch(error){console.error(error);}});这不是Axios独有的。使用FetchAPI时，您将应用相同的方法。Axios中的分组请求Axios的一个很好的特性是您可以使用axios.all()方法同时向多个端点发出HTTP请求。此方法以数组形式接收请求数组，并返回单个Promise对象，该对象仅在对传入数组的请求已单独解析时解析。以下代码段显示了执行此操作的语法：axios.all([axios.get("https://jsonplaceholder.typicode.com/posts"),axios.get("https://jsonplaceholder.typicode.com/comments"),]).then((responseArr)=>{//只有当所有请求都完成后才会执行console.log("FirstPost:",responseArr[0].data[0].title);console.log("第二条评论：",responseArr[1].data[1].body);}).catch((error)=>{console.log(error);});这里（对于Variation）我使用then()和catch()来链接方法来处理错误。Axios和Fetch与fetch()相比，Axios自带了一些额外的附加功能，例如：请求和响应拦截。更好地简化错误处理过程。XSRF保护。上传进度支持。响应超时。取消请求的能力。支持旧版浏览器。自动JSON数据转换。此外，Axios在浏览器和Node.js中可用。这对于在浏览器和后端之间共享JavaScript代码或前端应用程序的服务器端呈现很有用。您可以在此处阅读更多差异。结论我们在本演练中介绍了很多内容。让我们首先了解什么是RESTAPI以及您可能希望在应用程序中使用外部服务的原因。onMount然后我们建立一个Svelte项目，并使用FetchAPI使用Svelte方法从虚拟API中间获取文章列表。最后，我们查看了AxiosHTTP库并重写了我们的脚本，以使用Axios而不是FetchAPI来使用我们的模拟API。
