如何避免在循环中发起AJAX调用？搜索功能代码场景求助

看起来你遇到的核心问题是forEach循环不支持async/await的正确等待——虽然你在forEach的回调里用了await，但forEach本身不会等待每个异步操作完成，会直接遍历完所有元素，而你的AJAX请求还在后台异步执行，导致this.searchResults的数据要么顺序混乱，要么没按预期填充完成。

我给你两种实用的解决方案，你可以根据场景选择：

方案1：用for...of循环（顺序执行） #

这是最直观的方式，能保证每个AJAX请求完成后再处理下一个元素，适合需要严格按原结果顺序填充的场景：

async formatSearchUserByNameResults(results) {
  if (results.length > 0) {
    // 用for...of替代forEach，原生支持await等待异步操作
    for (const element of results) {
      const currentUserData = await user.getUserById(element.id);
      const aResult = searchBuilders.userBuilder(element);
      // 注意：你原代码里拼写错误，应该是currentUserData.following
      aResult.following = currentUserData.following;
      this.searchResults.push(aResult);
    }
  }
}

方案2：用Promise.all并行执行（效率更高） #

如果不需要严格按原results的顺序处理，或者想同时发起所有AJAX请求提升性能，用Promise.all是更优的选择：

async formatSearchUserByNameResults(results) {
  if (results.length === 0) return;

  // 先为每个元素创建异步处理的Promise对象
  const resultPromises = results.map(async (element) => {
    const currentUserData = await user.getUserById(element.id);
    const aResult = searchBuilders.userBuilder(element);
    aResult.following = currentUserData.following;
    return aResult;
  });

  // 等待所有Promise完成，再批量把结果添加到searchResults
  this.searchResults.push(...await Promise.all(resultPromises));
}

最后提个小细节：你原代码里currentUserData.folliwing多写了一个l，应该是following，这个拼写错误可能会导致后续取不到正确的属性值，记得修正哦～

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