【前端】Svelte：`await`模板

news2024/11/13 12:57:36

在现代前端开发中，处理异步数据是必不可少的，而 Svelte 提供了强大的 await 模板来简化异步操作的逻辑。与传统的 JavaScript async/await 不同，Svelte 的 await 模板允许我们直接在模板中处理异步数据，显著提升了代码的可读性和维护性。本文将从基础用法到实际场景应用深入讲解 Svelte 的 await 模板。

为什么选择 `await` 模板

通常，异步数据在组件中处理需要使用 async/await 或 Promise 回调，这些逻辑往往使模板复杂，尤其是在组件渲染之前需要完成的异步数据较多时。Svelte 的 await 模板使得在模板中直接处理异步数据成为可能，让开发者可以更清晰地构建动态应用程序。

`await` 模板语法结构

Svelte 的 await 模板允许我们使用以下三种状态来处理异步操作的不同阶段：

{#await promise}
  <!-- 等待 promise 结果时显示的内容 -->
{:then result}
  <!-- 当 promise 成功时显示的内容 -->
{:catch error}
  <!-- 当 promise 失败时显示的内容 -->
{/await}

在此结构中：

{#await promise}：用于开始一个 await 块。可以用来显示加载中的内容，等待 promise 的结果。
{:then result}：当 promise 成功解析时会执行此块的内容，并将结果赋值给 result 变量。
{:catch error}：当 promise 被拒绝时执行的内容，错误信息会存储在 error 变量中。

基本用法示例

首先，来看一个简单的例子来展示如何在 Svelte 中使用 await 模板。

示例：加载用户数据

假设我们要从 API 获取用户数据，在数据加载完成之前显示“Loading…”文本，如果成功则显示用户名，失败时显示错误信息。

<script>
  async function fetchUserData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    if (!response.ok) throw new Error('Failed to fetch user data');
    return await response.json();
  }

  // 调用异步函数返回 promise
  let userPromise = fetchUserData();
</script>

{#await userPromise}
  <p>Loading...</p>
{:then user}
  <p>User Name: {user.name}</p>
{:catch error}
  <p style="color: red;">Error: {error.message}</p>
{/await}

代码解析：

userPromise 是调用 fetchUserData() 返回的 Promise。
{#await userPromise} 块在等待 userPromise 的状态时显示“Loading…”；如果成功，显示用户名；如果失败，显示错误信息。

解释模板的执行流程

在加载时，{#await userPromise} 会显示“Loading…”的占位符。
一旦 userPromise 解析成功，控制权会转到 {:then user} 块，user 被赋予返回的数据，显示用户名。
如果 userPromise 被拒绝，{:catch error} 会执行，并将错误信息赋值给 error 变量。

`await` 模板的动态加载

await 模板可以用于动态数据请求，且可以随着数据变化而更新。例如，当我们实现搜索功能时，await 模板可以响应用户输入的关键词并根据新关键词加载数据。

示例：动态搜索用户

<script>
  import { debounce } from 'lodash';

  let query = '';
  let userPromise;

  async function searchUser(keyword) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users?name_like=${keyword}`);
    if (!response.ok) throw new Error('Failed to fetch user');
    return await response.json();
  }

  const onSearch = debounce(() => {
    userPromise = searchUser(query);
  }, 300);
</script>

<input type="text" bind:value={query} placeholder="Search user" on:input={onSearch} />

{#await userPromise}
  <p>Searching...</p>
{:then users}
  <ul>
    {#each users as user}
      <li>{user.name}</li>
    {/each}
  </ul>
{:catch error}
  <p style="color: red;">Error: {error.message}</p>
{/await}

代码解释：

使用 debounce 来避免频繁的 API 调用，仅在输入间隔超过 300 毫秒时触发请求。
根据 query 更新 userPromise，触发 await 模板更新显示结果。
若请求失败，则在 {:catch error} 中展示错误。

`await` 模板的嵌套与多级异步

在一些场景下，我们可能会遇到多级异步任务。例如，先加载用户数据，再根据用户数据加载更多相关信息。在这种情况下，await 模板的嵌套可以帮我们简化逻辑。

示例：加载用户及其详细信息

假设需要首先加载用户，然后根据用户 ID 加载其详细信息。

<script>
  async function fetchUser() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    if (!response.ok) throw new Error('Failed to fetch user');
    return await response.json();
  }

  async function fetchUserDetails(userId) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}/details`);
    if (!response.ok) throw new Error('Failed to fetch user details');
    return await response.json();
  }

  let userPromise = fetchUser();
</script>

{#await userPromise}
  <p>Loading user...</p>
{:then user}
  <p>User: {user.name}</p>

  {#await fetchUserDetails(user.id)}
    <p>Loading details...</p>
  {:then details}
    <p>Email: {details.email}</p>
    <p>Phone: {details.phone}</p>
  {:catch detailsError}
    <p style="color: red;">Error loading details: {detailsError.message}</p>
  {/await}
{:catch error}
  <p style="color: red;">Error: {error.message}</p>
{/await}

代码解释：

userPromise 加载用户基本信息。
内部的 await 块用来加载用户的详细信息。
如果加载用户信息失败则显示用户加载错误，如果加载用户详细信息失败则显示详细信息加载错误。

使用 `await` 模板实现分页加载

await 模板还可以用于实现分页加载的功能，这在加载大量数据时非常实用。

示例：分页加载文章

<script>
  let page = 1;
  let postsPromise = fetchPosts(page);

  async function fetchPosts(page) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=5`);
    if (!response.ok) throw new Error('Failed to fetch posts');
    return await response.json();
  }

  function loadMore() {
    page += 1;
    postsPromise = fetchPosts(page);
  }
</script>

{#await postsPromise}
  <p>Loading posts...</p>
{:then posts}
  <ul>
    {#each posts as post}
      <li>{post.title}</li>
    {/each}
  </ul>
  <button on:click={loadMore}>Load more</button>
{:catch error}
  <p style="color: red;">Error: {error.message}</p>
{/await}

代码解析：

每次点击“Load more”按钮时，page 增加，postsPromise 会更新为新的 Promise，从而重新加载新的数据。
利用 await 模板中的 {:then posts} 块动态渲染加载的内容。

总结

Svelte 的 await 模板通过让异步操作在模板中直接呈现，将异步操作处理简化为声明式写法。通过 {#await promise}、{:then result} 和 {:catch error} 三个块结构，能够优雅地展示异步任务的不同状态。不论是处理简单的数据加载、错误处理，还是多级嵌套异步任务，await 模板都能大大提升开发体验。