面试题：Svelte Derived Store的复杂依赖处理

Question

假设有三个Svelte store：`storeA`存储数字，`storeB`存储布尔值，`storeC`存储字符串。当`storeB`为`true`时，派生存储`resultStore`的值为`storeA`的平方与`storeC`长度的乘积；当`storeB`为`false`时，`resultStore`的值为`storeA`的立方加上`storeC`的首字母的ASCII码值。请实现这个功能，并说明如何处理可能的异步操作（假设`storeA`、`storeB`、`storeC`获取数据可能是异步的）。

Answer 1

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

    // 定义三个Svelte store
    const storeA = writable<number>();
    const storeB = writable<boolean>();
    const storeC = writable<string>();

    // 派生存储
    const resultStore = derived([storeA, storeB, storeC], ([$storeA, $storeB, $storeC]) => {
        if ($storeA === undefined || $storeB === undefined || $storeC === undefined) {
            return;
        }
        if ($storeB) {
            return ($storeA ** 2) * $storeC.length;
        } else {
            return ($storeA ** 3) + $storeC.charCodeAt(0);
        }
    });

    // 处理异步操作示例
    const fetchData = async () => {
        try {
            // 模拟异步获取数据
            const dataA = await new Promise<number>((resolve) => setTimeout(() => resolve(5), 1000));
            const dataB = await new Promise<boolean>((resolve) => setTimeout(() => resolve(true), 1500));
            const dataC = await new Promise<string>((resolve) => setTimeout(() => resolve('hello'), 2000));

            storeA.set(dataA);
            storeB.set(dataB);
            storeC.set(dataC);
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };

    fetchData();
</script>

{#if $resultStore === undefined}
    Loading...
{:else}
    Result: {$resultStore}
{/if}

说明

1. 派生存储实现：使用Svelte的derived函数，根据storeA、storeB、storeC的值计算resultStore。在计算时，首先检查三个store是否都有值，避免未定义的情况。然后根据storeB的值进行不同的计算。
2. 异步操作处理：通过async函数模拟异步获取数据的过程，使用setTimeout模拟网络延迟。在获取到数据后，通过set方法更新相应的store，从而触发resultStore的重新计算。在实际应用中，await后面通常是实际的异步API调用，如fetch等。同时，使用try...catch块捕获异步操作中可能出现的错误并进行处理。