后端开发教程 - Java、Spring Boot 实战 - msg200.com
在 Svelte 中使用 API
安装
我们正在做什么
概述
我从一周前就开始研究 Svelte 了，说我已经爱上它一点也不为过。它做所有事情都快得多，也更容易理解，你可能会看到我成为它的非官方布道者。说实话，React 对我来说很难掌握，我断断续续地尝试了至少一个月才适应。直到引入了 Hooks 之后，我才能够更好地使用它。不过，有了 Svelte，我花了一周多的时间，写了一篇关于它的文章！
不用多说，我们开始吧！
安装
假设您的系统上安装了 Node，请在命令行中输入以下内容，
npx degit sveltejs/template numberfacts
这使用了 Github 上 Svelte 官方仓库的模板，并为我们提供了一个可立即使用的 Hello World 项目。完成后，cd进入你的目录并运行npm install。它应该会安装 Svelte 运行项目所需的所有软件包。如果你正确执行了这些步骤，npm run dev你的项目应该会在 localhost:5000 上启动。
我们正在做什么
我们将使用Numbers API作为我们的端点来生成有关用户输入的任何数字的随机事实。
概述
我们的目录结构如下 -
node_modules
public
src
--app.svelte
--main.js
package.json
package-lock.json
README.md
rollup.config.js
我忽略了文件夹的内容，只关注我们将要使用的文件夹。在main.js文件中，删除该props: 'World'部分，并将文件内容替换App.svelte为以下代码：
<script>
let query = "";
let result;
async function getResult() {
let response = await fetch(`http://numbersapi.com/${query}`);
let text = await response.text();
let data = text;
return data;
}
function submitHandler(e) {
result = getResult();
}
</script>
<div class="container mt-5">
<div class="row">
<div class="col-md"></div>
<div class="col-md-8 text-center">
<h1 class="display-4">Random Number Facts</h1>
<form class="form-inline" on:submit|preventDefault={submitHandler}>
<input class="w-75 form-control" type="number" bind:value={query}>
<button class="w-25 btn btn-dark">Submit</button>
</form>
{#if result===undefined}
<p></p>
{:else}
{#await result}
<p>Loading...</p>
{:then value}
{value}
{:catch error}
{error.message}
{/await}
{/if}
</div>
<div class="col-md"></div>
</div>
</div>
这里发生了什么？
在 Svelte 中，一个应用程序由一个或多个组件组成。组件是一个可复用的独立代码块，它封装了 HTML、CSS 和 JavaScript，并将它们组合在一起，并写入一个.svelte文件中。我们目前的“hello world”示例就是一个简单的组件。
在上面的代码中，我们只使用 HTML 和 Javascript，并让 Bootstrap 为我们处理 CSS。
我们初始化一个query字符串，并将其绑定到 input 的值bind:value={query}。花括号表示我们在 HTML 中使用了 JS 变量。接下来，我们声明一个result变量，用于存储发送请求时的结果。
onSubmitHandler()当用户在输入框中输入数字时，运行。我们将的返回值赋给这里getResult()。result执行getResult()异步获取请求并返回响应。
在 HTML 部分，Svelte 提供了很多开箱即用的功能，非常实用。该on:submit指令是 Svelte 版本的 JavaScript 事件监听器。onSubmitHandler()当用户按下“提交”按钮时，我们会将函数赋值给它。
、和块用于解析渲染组件上的 Promise。你可能已经猜到了， 块是一个条件块{#await}。{:then}{:catch}{#if} {:else}
创建卡片组件
接下来，我们将创建一个新组件，用于渲染从 fetch 请求中获取的内容。在同一目录中创建一个新文件并将其命名为Card.svelte。在 中添加以下代码Card.svelte，
<script>
export let data;
</script>
<div class="card mt-5">
<div class="card-body">
<h5 class="card-title">{data}</h5>
</div>
</div>
这个代码非常小。我们只需写出我们想要的卡片外观以及渲染数据的位置。我们用它export let data来让主App.svelte组件使用这个变量将 props 传递给卡片。语法在某些地方可能有点奇怪，但你会习惯的。记住，Svelte 不是 JavaScript。它是一个 JavaScript 编译器，可以在生产环境中构建原生 JavaScript。
现在，我们需要对App.svelte组件进行一些修改来渲染卡片。首先，在顶部的脚本标签中添加以下代码：
import Card from './Card.svelte';
现在我们可以将卡片组件添加为 HTML 标签，并将请求的结果作为 prop 传递给它，如下所示，
{#if result===undefined}
<p></p>
{:else}
<p>Loading...</p>
{#await result}
{:then value}
<Card data={value} />
{:catch error}
<Card data={error.message}/>
{/await}
{/if}
好了，差不多就是这样了！你应该能够输入一个数字，并在屏幕上显示结果。你还可以做一些其他的小改动，比如输入数字后清除输入字段，以及添加一个旋转按钮来代替我们现在使用的加载 p 标签。Svelte也提供了一些开箱即用的动画和过渡效果！
TL;DR 带我到代码：
