在Web应用中，前端经常需要与后端进行数据交互。最常见的交互方式之一就是通过HTTP请求获取数据。在本章节中，我们将学习如何使用Svelte框架发送GET请求，并处理返回的数据。
安装依赖
首先，我们需要一个库来帮助我们处理HTTP请求。svelte-fetch 是一个轻量级的选择，它基于 isomorphic-fetch 库，可以方便地在浏览器和Node.js环境中发送HTTP请求。
你可以通过npm或yarn安装这个库：
npm install svelte-fetch # 或者 yarn add svelte-fetch
创建项目结构
假设你已经有一个基本的Svelte项目。在这个项目中，我们将创建一个新的组件来展示如何发送GET请求并显示结果。
首先，在 src/components 目录下创建一个名为 DataFetcher.svelte 的文件。
编写DataFetcher组件
打开 DataFetcher.svelte 文件，开始编写我们的组件代码。
-- -------------------- ---- -------
--------
------ - ------- - ---- ---------
------ ----- ---- ---------------
--- ---- - -----
--- ----- - -----
-- -------------------------------
------------- -- -- -
--- -
----- -------- - ----- ------------------------------------------------------
-- -------------- ----- --- ----------------
---- - ----- ----------------
- ----- ----- -
----- - ------------
-
---
---------
---- ------
-- ------------- ----------------------
------ -- ------
----
------------------------
----------------------------
-------------------------
---------------------------------------
-----
-------
----------------
-----这段代码做了以下几件事：
- 导入了必要的库。
- 定义了两个变量：
data用于存储从服务器获取的数据，error用于捕获错误信息。 - 使用
onMount生命周期钩子来确保在DOM加载完成后才执行请求。 - 发起GET请求到指定URL，并处理响应结果。
- 根据请求的状态显示不同的UI内容。
在App组件中使用DataFetcher
为了测试我们的 DataFetcher 组件，我们需要在主应用组件中引入并使用它。打开 App.svelte 文件，并添加如下内容：
<script> import DataFetcher from './components/DataFetcher.svelte'; </script> <main> <h1>Svelte GET 请求示例</h1> <DataFetcher /> </main>
现在，当你运行你的Svelte应用时，你应该能看到从服务器获取的数据被正确地展示出来。
处理错误和异常
在上面的例子中，我们简单地捕捉了错误并在界面上展示了错误信息。实际开发中，你可能还需要考虑更复杂的错误处理逻辑，例如重试机制、显示特定的错误页面等。
小结
通过本章节的学习，我们掌握了如何在Svelte应用中使用 svelte-fetch 发送GET请求，并展示了如何处理请求成功和失败的情况。这为后续更复杂的HTTP请求操作打下了基础。在实际项目中，根据需求的不同，你可能还会遇到POST、PUT等其他类型的HTTP请求，这些将在接下来的内容中继续探讨。