Svelte 发送 GET 请求-JavaScript中文网-JavaScript教程资源分享门户

在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 文件，开始编写我们的组件代码。

// www.javascriptcn.com code example
<script>
  import { onMount } from 'svelte';
  import fetch from 'svelte-fetch';

  let data = null;
  let error = null;

  // 使用onMount生命周期钩子确保DOM已经加载完毕再发起请求
  onMount(async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      if (!response.ok) throw new Error('网络响应错误');

      data = await response.json();
    } catch (err) {
      error = err.message;
    }
  });
</script>

{#if error}
  <p style="color: red;">请求失败：{error}</p>
{:else if $data}
  <ul>
    <li>任务ID：{$data.id}</li>
    <li>用户ID：{$data.userId}</li>
    <li>标题：{$data.title}</li>
    <li>完成状态：{String($data.completed)}</li>
  </ul>
{:else}
  <p>正在加载数据...</p>
{/if}

这段代码做了以下几件事：

导入了必要的库。
定义了两个变量：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请求，这些将在接下来的内容中继续探讨。