使用chrome.storage.sync时树未按正确顺序遍历的问题排查与解决

问题原因：异步操作打乱了DFS的同步执行逻辑 #

你遇到的核心问题在于 chrome.storage.sync.get是异步API，和直接访问普通对象的同步逻辑完全不同：

在普通对象版本的代码里，所有操作都是同步执行的：

1. 立刻拿到当前节点的子节点数组
2. 逐个同步调用closeTree(child)，等所有子节点的遍历（包括它们的子节点）全部完成
3. 最后才打印当前节点

但在chrome.storage的版本中，get方法是异步的——调用它之后，JavaScript引擎不会等待回调函数执行，会直接继续后续流程。具体到你的代码：

1. 调用closeTree('1221')，发起chrome.storage.sync.get请求后，函数就直接结束了
2. 当get的回调返回时，才会拿到子节点数组，然后调用closeTree(child)（这又会发起新的异步请求）
3. 但forEach只是批量发起这些异步请求，不会等待它们全部完成，所以回调里的console.log("Closing: 1221")会立刻执行，而子节点的遍历回调还在排队等待完成
4. 最后子节点的回调陆续完成，才打印子节点的值，导致顺序完全反转

修复方案：用Promise + async/await把异步逻辑转为同步风格执行 #

要让DFS遍历回到预期的顺序，我们需要让异步操作按顺序执行，等待每个子节点的遍历完成后再处理当前节点。具体步骤如下：

1. 把chrome.storage的回调式API封装为Promise：

// 封装get方法为Promise，方便后续用await等待结果
function getNodeChildren(root) {
  return new Promise((resolve) => {
    chrome.storage.sync.get(root.toString(), (data) => {
      // 拿到子节点数组，没有则返回空数组
      resolve(data[root] || []);
    });
  });
}

2. 修改closeTree为async函数，用await控制执行顺序：

async function closeTree(root) {
  // 等待获取当前节点的子节点
  const children = await getNodeChildren(root);
  
  // 用for...of循环（而非forEach）遍历子节点，确保每个子节点遍历完成后再下一个
  for (const child of children) {
    await closeTree(child);
  }
  
  // 所有子节点都遍历完成后，再打印当前节点
  console.log("Closing: " + root);
}

3. 调用异步函数时注意处理Promise：

// 调用时可以加上catch处理可能的存储操作错误
closeTree('1221').catch(err => console.error('遍历出错:', err));

这样修改后，代码会像同步版本一样：先递归遍历完所有子节点，最后再打印当前节点，输出顺序就会符合DFS的预期（1223, 1224, 1221）。

为什么不能用forEach？

forEach是同步遍历，但它不会等待内部的await操作完成——也就是说，它会一次性发起所有子节点的closeTree调用，而不会等每个子节点的遍历完成，这样还是会导致当前节点先打印的问题。而for...of结合await会逐个等待每个子节点的遍历流程全部结束，才会继续下一个循环，完美匹配DFS的同步执行逻辑。

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