面试题：Svelte中如何在事件处理函数里进行异步操作

Question

在Svelte中，假设你有一个按钮，点击按钮后需要发起一个异步的网络请求（可以用fetch模拟），获取数据后更新组件的状态。请描述实现这个功能的主要步骤，并给出简单代码示例。

Answer 1

1. 主要步骤：
   • 在组件中定义状态变量，用于存储请求结果。
   • 定义一个函数，在函数内部使用fetch发起异步网络请求。
   • 处理fetch的响应，将获取的数据更新到状态变量中。
   • 将点击事件绑定到定义的函数上。
2. 代码示例：

<script>
    let data;
    const fetchData = async () => {
        try {
            const response = await fetch('https://example.com/api/data');
            const result = await response.json();
            data = result;
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };
</script>

<button on:click={fetchData}>Fetch Data</button>

{#if data}
    <pre>{JSON.stringify(data, null, 2)}</pre>
{/if}