面试题：Svelte中组合多个异步store实现复杂逻辑的处理

创建组合逻辑：
- 利用 svelte/store 的 writable 和 derived 来处理。
- 假设 userStore 和 permissionStore 已经通过 writable 创建并进行异步数据获取。

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

    // 假设这两个store已经通过API获取数据
    const userStore = writable(null);
    const permissionStore = writable(null);

    const combinedStore = derived([userStore, permissionStore], ([$user, $permission]) => {
        if (!$user ||!$permission) {
            return null;
        }
        // 根据用户角色筛选权限
        const userRole = $user.role;
        const filteredPermissions = $permission.filter(permission => permission.role === userRole);
        return filteredPermissions;
    });
</script>

处理异常情况：
- 可以在获取数据的异步函数中处理异常。例如，假设使用 fetch 来获取数据：

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

    const userStore = writable(null);
    const permissionStore = writable(null);

    const fetchUser = async () => {
        try {
            const response = await fetch('/api/user');
            if (!response.ok) {
                throw new Error('User API request failed');
            }
            const data = await response.json();
            userStore.set(data);
        } catch (error) {
            console.error('Error fetching user:', error);
        }
    };

    const fetchPermission = async () => {
        try {
            const response = await fetch('/api/permission');
            if (!response.ok) {
                throw new Error('Permission API request failed');
            }
            const data = await response.json();
            permissionStore.set(data);
        } catch (error) {
            console.error('Error fetching permission:', error);
        }
    };

    const combinedStore = derived([userStore, permissionStore], ([$user, $permission]) => {
        if (!$user ||!$permission) {
            return null;
        }
        const userRole = $user.role;
        const filteredPermissions = $permission.filter(permission => permission.role === userRole);
        return filteredPermissions;
    });

    // 调用获取数据的函数
    fetchUser();
    fetchPermission();
</script>

在组件中显示：
- 使用 {#if} 块来处理数据加载和显示：

<script>
    // 上述定义的代码
</script>

{#if $combinedStore}
    <ul>
        {#each $combinedStore as permission}
            <li>{permission.name}</li>
        {/each}
    </ul>
{:else if $userStore === null && $permissionStore === null}
    <p>Loading...</p>
{:else}
    <p>An error occurred while fetching data.</p>
{/if}

面试题：Svelte中组合多个异步store实现复杂逻辑的处理

知识考点

面试题答案