将PouchDB Promise传入Fancytree Source选项遇问题求助

嘿，我完全懂你遇到的坑——你想把包含数据库初始化+变更订阅的逻辑塞进给Fancytree source 的Promise里，但只有前两步（取文档、生成树根）正常跑起来了，后面的changes()订阅直接被忽略了，对吧？这其实是对Promise的设计初衷和Fancytree source 选项的预期理解有偏差，咱们一步步理清楚：

问题根源 #

Fancytree的source选项接受的Promise，本质上是用来处理一次性的异步初始化数据请求——它只关心这个Promise最终resolve出的树结构数据，一旦Promise进入resolved状态，Fancytree就会用返回的数据渲染树，之后这个Promise的生命周期就结束了。

而你把changes()订阅放在了同一个Promise链里，这就有问题了：changes()是一个长期运行的事件监听（它会一直监听数据库变更，不会自动结束），但你的Promise在步骤2生成树根并resolve之后，整个Promise就已经完成了，后续的代码相当于在一个已经“结束”的Promise后面追加逻辑，自然会被直接忽略。

正确的处理方式 #

咱们把初始化数据和长期变更订阅拆成两个独立的逻辑：前者交给Fancytree的source Promise负责，后者单独启动，和初始化并行执行。

代码示例 #

// 1. 单独封装初始化树数据的Promise（对应你的步骤1+2）
const fetchInitialTreeData = () => {
  return db.allDocs({ include_docs: true })
    .then(dbResult => {
      // 这里是你的步骤2：从数据库文档生成Fancytree需要的树根结构
      return generateTreeRootFromDocs(dbResult.rows);
    });
};

// 2. 初始化Fancytree，把初始化Promise传给source
$('#your-tree-container').fancytree({
  source: fetchInitialTreeData(),
  // 其他Fancytree配置项...
});

// 3. 单独启动数据库变更订阅（你的步骤3）
db.changes({
  live: true,
  since: 'now', // 从当前时间开始监听后续变更
  include_docs: true
}).on('change', (changeEvent) => {
  // 这里处理数据库变更，同步更新Fancytree
  const treeInstance = $('#your-tree-container').fancytree('getTree');
  // 根据变更类型（新增/修改/删除）更新对应的节点
  syncTreeWithDbChange(treeInstance, changeEvent.doc);
});

如果想把初始化和订阅放在同一个函数里（可选） #

你也可以写一个整合函数，同时返回初始化Promise并启动订阅，但核心还是两者分离：

const initTreeAndSubscribeToChanges = () => {
  // 先初始化数据的Promise
  const initPromise = db.allDocs({ include_docs: true })
    .then(res => generateTreeRootFromDocs(res.rows));
  
  // 直接启动订阅，不用等初始化完成
  db.changes({
    live: true,
    since: 'now',
    include_docs: true
  }).on('change', handleTreeUpdate);
  
  // 返回初始化Promise给Fancytree的source
  return initPromise;
};

// 调用方式不变
$('#your-tree-container').fancytree({
  source: initTreeAndSubscribeToChanges(),
  // ...
});

关键要点回顾 #

• Promise是用来处理一次性异步完成的操作，不是用来承载长期运行的事件监听的，一旦Promise决议（resolve/reject），后续追加的逻辑不会执行。
• Fancytree的source只负责获取初始化的树数据，后续的动态更新（比如数据库变更同步）需要通过Fancytree的API单独处理，不能塞进初始化的Promise里。

内容的提问来源于stack exchange，提问作者Gordon