面试题：Solid.js的createEffect在复杂异步流程中的应用

Solid.js 代码实现：

import { createSignal, createEffect } from'solid-js';
import { fetchUserInfo, fetchUserPreferences } from './api'; // 假设这是获取数据的API函数

const App = () => {
    const [userInfo, setUserInfo] = createSignal(null);
    const [userPreferences, setUserPreferences] = createSignal(null);
    const [isLoggedIn, setIsLoggedIn] = createSignal(false);

    // 模拟登录成功的函数
    const login = () => {
        setIsLoggedIn(true);
    };

    createEffect(() => {
        if (isLoggedIn()) {
            // 获取用户信息
            fetchUserInfo()
               .then(info => {
                    setUserInfo(info);
                    // 用户信息获取成功后，获取用户偏好设置
                    return fetchUserPreferences();
                })
               .then(preferences => {
                    setUserPreferences(preferences);
                })
               .catch(error => {
                    console.error('获取数据时出错:', error);
                    // 这里可以根据错误类型进行更具体的处理，例如显示错误提示给用户
                });
        }
    });

    return (
        <div>
            {!isLoggedIn() && <button onClick={login}>登录</button>}
            {isLoggedIn() && userInfo() && userPreferences() && (
                // 在这里根据userInfo和userPreferences渲染不同的UI部分
                <div>
                    <p>用户信息: {JSON.stringify(userInfo())}</p>
                    <p>用户偏好设置: {JSON.stringify(userPreferences())}</p>
                </div>
            )}
        </div>
    );
};

export default App;

错误处理解释：
- 在 createEffect 中，当 isLoggedIn 为 true 时，会发起异步请求获取用户信息和用户偏好设置。
- 使用 Promise 的 catch 方法来捕获在 fetchUserInfo 或 fetchUserPreferences 过程中可能出现的错误。在 catch 块中，我们简单地将错误信息打印到控制台。实际应用中，可以根据错误类型进行更详细的处理，例如：
  - 如果是网络错误，可以提示用户检查网络连接。
  - 如果是服务器端错误，可以提示用户稍后重试，并可能提供错误代码以便后端排查问题。
  - 可以创建一个全局的错误处理机制，将错误信息传递给一个专门的组件进行统一的展示，这样可以保证用户体验的一致性。例如，可以使用一个 ErrorBoundary 组件来捕获错误并显示友好的错误提示。

在这个实现中，createEffect 会在 isLoggedIn 状态变化时运行，确保在用户登录成功后按顺序获取数据并渲染UI，同时通过 catch 处理潜在的错误。

星途面试题库

面试题：Solid.js的createEffect在复杂异步流程中的应用

知识考点

面试题答案