如何用JavaScript实现一个支持延迟加载的树形数据结构？

class TreeNode {
    constructor(id, name, hasChildren = false, children = []) {
        this.id = id;
        this.name = name;
        this.children = children;
        this.hasChildren = hasChildren; // 是否有子节点，用于判断是否需要延迟加载
        this.isLoaded = !hasChildren;   // 如果没有子节点，则视为已加载
        this.isLoading = false;         // 是否正在加载中
    }

    // 模拟异步加载子节点的方法
    async loadChildren(fetchChildrenApi) {
        if (!this.hasChildren || this.isLoaded || this.isLoading) {
            console.log(`Node ${this.name}: No children to load, already loaded, or already loading.`);
            return;
        }

        this.isLoading = true;
        console.log(`Node ${this.name}: Starting to load children...`);
        try {
            // 假设 fetchChildrenApi 是一个返回 Promise 的函数
            // 它会根据当前节点的ID去后端获取子节点数据
            const childData = await fetchChildrenApi(this.id);
            this.children = childData.map(item =>
                new TreeNode(item.id, item.name, item.hasChildren || false, [])
            );
            this.isLoaded = true;
            console.log(`Node ${this.name}: Children loaded successfully.`);
        } catch (error) {
            console.error(`Node ${this.name}: Failed to load children:`, error);
            // 这里可以添加错误处理逻辑，比如设置一个错误状态
        } finally {
            this.isLoading = false;
        }
    }
}

// 模拟后端API，根据父节点ID返回子节点数据
const mockFetchChildrenApi = async (parentId) => {
    console.log(`Fetching children for parentId: ${parentId}`);
    return new Promise(resolve => {
        setTimeout(() => {
            let children = [];
            if (parentId === 'root') {
                children = [
                    { id: '1', name: '部门A', hasChildren: true },
                    { id: '2', name: '部门B', hasChildren: false },
                    { id: '3', name: '部门C', hasChildren: true }
                ];
            } else if (parentId === '1') {
                children = [
                    { id: '1-1', name: '员工A1', hasChildren: false },
                    { id: '1-2', name: '员工A2', hasChildren: true }
                ];
            } else if (parentId === '1-2') {
                children = [
                    { id: '1-2-1', name: '项目X', hasChildren: false }
                ];
            } else if (parentId === '3') {
                children = [
                    { id: '3-1', name: '子部门C1', hasChildren: false }
                ];
            }
            resolve(children);
        }, Math.random() * 1000 + 500); // 模拟网络延迟
    });
};

// 示例用法
async function main() {
    const rootNode = new TreeNode('root', '公司总览', true);

    // 假设在UI中点击了展开rootNode
    console.log('--- Initial State ---');
    console.log(rootNode);

    await rootNode.loadChildren(mockFetchChildrenApi);
    console.log('--- After loading root children ---');
    console.log(rootNode);

    // 假设在UI中点击了展开部门A (id: '1')
    const deptA = rootNode.children.find(node => node.id === '1');
    if (deptA) {
        await deptA.loadChildren(mockFetchChildrenApi);
        console.log('--- After loading Dept A children ---');
        console.log(rootNode); // 观察整个树结构的变化
    }

    // 再次点击部门A，不会重复加载
    if (deptA) {
        await deptA.loadChildren(mockFetchChildrenApi);
    }
}

// main(); // 在实际应用中，这会绑定到UI事件

// 在TreeNode类中可以这样扩展
class TreeNode {
    // ... 现有属性

    constructor(...) {
        // ...
        this.error = null; // 用于存储错误信息
    }

    async loadChildren(fetchChildrenApi) {
        // ... 省略之前的逻辑

        this.isLoading = true;
        this.error = null; // 每次加载前清除之前的错误
        try {
            const childData = await fetchChildrenApi(this.id);
            this.children = childData.map(item =>
                new TreeNode(item.id, item.name, item.hasChildren || false, [])
            );
            this.isLoaded = true;
        } catch (error) {
            console.error(`Node ${this.name}: Failed to load children:`, error);
            this.error = "加载失败，请检查网络或稍后重试。"; // 设置错误信息
            // 可以在这里根据错误类型做更细致的判断
        } finally {
            this.isLoading = false;
        }
    }
}

// 在UI渲染时，可以根据 isLoading 和 error 属性来显示不同的状态
/*
<div class="tree-node">
    <span @click="toggleExpand(node)">
        {{ node.name }}
        <span v-if="node.isLoading"> (加载中...) </span>
        <span v-if="node.error" style="color: red;">
            {{ node.error }}
            <button @click="retryLoad(node)">重试</button>
        </span>
    </span>
    <div v-if="isExpanded(node) && node.isLoaded && node.children.length > 0">
        <TreeNodeComponent v-for="child in node.children" :key="child.id" :node="child" />
    </div>
    <div v-if="isExpanded(node) && node.isLoaded && node.children.length === 0 && node.hasChildren">
        <p>此节点下暂无内容。</p>
    </div>
</div>
*/