面试题：Svelte中生命周期函数与异步数据加载结合基础

Question

在Svelte中，简要描述如何在`onMount`生命周期函数内进行异步数据加载，并处理加载过程中的错误。请给出示例代码。

Answer 1

1. 异步数据加载与错误处理：
   • 在Svelte中，onMount函数来自'svelte'模块。可以在onMount内使用async/await来进行异步数据加载，并通过try - catch块处理错误。
2. 示例代码：

<script>
    import { onMount } from'svelte';
    let data;
    let error;

    onMount(async () => {
        try {
            const response = await fetch('https://example.com/api/data');
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            data = await response.json();
        } catch (e) {
            error = e;
        }
    });
</script>

{#if error}
    <p>Error: {error.message}</p>
{:else if data}
    <pre>{JSON.stringify(data, null, 2)}</pre>
{:else}
    <p>Loading...</p>
{/if}

在上述代码中：

• 引入onMount函数。
• 定义变量data用于存储加载的数据，error用于存储可能出现的错误。
• 在onMount的异步函数内，尝试通过fetch获取数据。如果fetch响应状态码不是2xx，则抛出错误。成功获取响应后，将响应解析为JSON格式数据并赋值给data。
• 如果捕获到错误，将错误赋值给error。
• 在模板部分，根据error和data的值，显示相应的加载状态、错误信息或数据。