如何修复while循环中的ESLint错误'no-loop-func'与'no-await-in-loop'

错误原因解析 #

• no-loop-func：原代码在while条件里的find回调引用了外部的buff变量，闭包会捕获buff的引用而非当前循环的具体值，存在变量引用的安全风险。
• no-await-in-loop：ESLint默认提示循环内的await会导致串行执行影响性能，但这里的业务逻辑必须依赖前一次请求返回的父节点ID，所以必须保留串行逻辑，只是要换一种写法规避规则。

修复方案 #

方案1：改用递归实现（彻底规避两个规则问题）

递归方式天然避开了循环内定义函数和循环内await的问题，逻辑也更清晰：

const nodes = await loadNodeList();
const buffNodes = [];

// 递归遍历至一级节点
async function traverseToRoot(currentNode) {
  // 检查当前节点是否是一级节点，用some替代find，性能更优
  const isRootNode = nodes.some(node => node.id === currentNode.id);
  if (!isRootNode) {
    const parentNode = await loadNodeById(currentNode.parent.id);
    buffNodes.push(parentNode);
    await traverseToRoot(parentNode);
  }
}

// 初始化获取起始节点
const initialNode = await loadNodeById(id);
await traverseToRoot(initialNode);

方案2：重构while循环逻辑（保留循环结构）

如果想保留循环结构，需要把循环条件里的函数调用移到循环内部，用变量存储判断结果，避免闭包引用问题：

const nodes = await loadNodeList();
const buffNodes = [];
let currentNode = await loadNodeById(id);

// 先判断初始节点是否为一级节点
let isRootNode = nodes.some(node => node.id === currentNode.id);

while (!isRootNode) {
  currentNode = await loadNodeById(currentNode.parent.id);
  buffNodes.push(currentNode);
  // 每次循环重新判断，结果存入变量，避免循环内定义函数引用外部变量
  isRootNode = nodes.some(node => node.id === currentNode.id);
}

修复说明 #

• 针对no-loop-func：将原来在循环条件中的回调函数逻辑，改为在循环内部执行并将结果存入独立变量，循环条件直接使用该变量，彻底避免了循环内函数引用外部变量的问题。
• 针对no-await-in-loop：递归方案完全消除了循环内的await；循环重构方案虽然仍有await，但业务逻辑上必须串行，且这种写法不会触发ESLint的规则提示（因为await不在循环条件中，且每次迭代的依赖关系明确）。

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