面试题：Svelte 自定义 store 如何处理异步数据获取并保证数据一致性

Question

假设你需要创建一个 Svelte 自定义 store 来获取后端的用户数据，获取过程是异步的。在获取数据过程中，可能会有多个组件同时订阅该 store，如何确保数据获取完成后所有订阅组件获取到一致的数据状态，同时处理可能出现的错误情况，请详细阐述实现思路并给出关键代码示例。

Answer 1

实现思路

1. 创建 Svelte 自定义 store：使用 writable 创建一个可写的 store 来存储用户数据，初始值可以设为 null 或其他合适的默认值。同时，创建一个 pending 状态来表示数据是否正在获取中，以及一个 error 状态来表示获取数据时是否发生错误。
2. 异步获取数据：在自定义 store 的实现中，使用 fetch 或其他异步请求库来向后端获取用户数据。
3. 处理订阅和数据一致性：当有组件订阅该 store 时，首先返回当前的状态（包括 data、pending 和 error）。如果数据正在获取中（pending 为 true），则等待数据获取完成后，再更新所有订阅者的状态。
4. 错误处理：在异步获取数据过程中，如果发生错误，更新 error 状态，并将 pending 设为 false，以便订阅组件能够得知错误情况并进行相应处理。

关键代码示例

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

    function createUserStore() {
        const { subscribe, set, update } = writable({
            data: null,
            pending: false,
            error: null
        });

        const fetchData = async () => {
            try {
                update(state => ({...state, pending: true }));
                const response = await fetch('/api/user');
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                set({ data, pending: false, error: null });
            } catch (error) {
                update(state => ({...state, pending: false, error: error.message }));
            }
        };

        return {
            subscribe,
            fetchData
        };
    }

    const userStore = createUserStore();
    userStore.fetchData();
</script>

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

在上述代码中：

• createUserStore 函数创建了一个自定义 store。
• fetchData 函数负责异步获取用户数据，并根据结果更新 store 的状态。
• 组件通过 subscribe 订阅 userStore，并根据 pending、error 和 data 的不同状态进行相应的 UI 展示。