面试题：Svelte中如何设计一个支持异步状态更新的自定义Store

基本步骤和关键要点

创建自定义Store：
- 使用Svelte的writable来创建一个初始状态的Store。这个初始状态可以包含loading（布尔值，用于表示异步操作是否正在进行），data（用于存储成功时的数据，初始值可以为null或默认值），error（用于存储错误信息，初始值可以为null）。
处理异步操作：
- 在异步操作开始时，将loading设置为true，error设置为null，如果有必要可以将data重置为初始状态。
- 当异步操作成功完成时，将loading设置为false，将data更新为操作返回的数据，并保持error为null。
- 如果异步操作出错，将loading设置为false，data可以保持不变（或重置），并将error设置为错误信息。

代码示例

<script>
    import { writable } from'svelte/store';

    // 创建自定义Store
    function asyncStore() {
        const { subscribe, set, update } = writable({
            loading: false,
            data: null,
            error: null
        });

        const fetchData = async () => {
            try {
                // 开始异步操作，设置loading为true
                update(state => ({...state, loading: true, error: null }));
                const response = await fetch('https://example.com/api/data');
                const result = await response.json();
                // 操作成功，更新data并设置loading为false
                update(state => ({...state, loading: false, data: result }));
            } catch (error) {
                // 操作出错，设置error并设置loading为false
                update(state => ({...state, loading: false, error: error.message }));
            }
        };

        return {
            subscribe,
            fetchData
        };
    }

    const myAsyncStore = asyncStore();
</script>

{#if $myAsyncStore.loading}
    <p>Loading...</p>
{:else if $myAsyncStore.error}
    <p>Error: {$myAsyncStore.error}</p>
{:else if $myAsyncStore.data}
    <p>Data: {JSON.stringify($myAsyncStore.data)}</p>
{/if}

<button on:click={() => myAsyncStore.fetchData()}>Fetch Data</button>

星途面试题库

面试题：Svelte中如何设计一个支持异步状态更新的自定义Store

知识考点

面试题答案

基本步骤和关键要点

代码示例