JavaScript Promise在循环中执行顺序异常问题咨询

嘿，这个问题我太熟了！咱们先拆解一下为啥会出现这种顺序错乱的情况，再一步步把它搞定～

问题根源分析 #

你现在的代码里有两个核心问题导致输出顺序不符合预期：

1. 异步请求并发执行：循环里每次迭代都会立刻调用getDataFNLN，四个Promise会同时发起异步请求，它们的第一个then回调（输出first）会在各自的firebase请求完成后陆续触发，等所有第一个回调都执行完，才会轮到第二个then回调（输出second），所以就出现了first first first first second second second second的结果。
2. var的作用域陷阱：你用var声明的count、count1是函数级作用域，所有异步回调共享同一个变量实例，等回调执行时，count早就变成循环结束后的数值了，这还会导致AllReviewee和AllReviewer的赋值索引出错（不过这不是顺序问题的直接原因，但也是个隐患）。

解决方案：让异步操作串行执行 #

要实现first second first second...的预期顺序，我们需要让每个循环迭代里的两个异步请求串行执行，并且整个循环的迭代也按顺序进行。下面给你两种常用的实现方式：

方案1：用async/await（最直观易读） #

async/await可以让异步代码看起来像同步代码，完美解决串行执行的问题，同时用let或const代替var解决作用域问题：

// 初始化数组，用push方法代替手动维护count索引，更安全
const AllReviewee = [];
const AllReviewer = [];

// 定义异步处理函数
async function processAllData() {
  for (const key in data) {
    // 先获取被评价者信息，等待请求完成
    const revieweeName = await getDataFNLN(idOfReviewee);
    AllReviewee.push(revieweeName);
    console.log("first");

    // 再获取对应评价者信息，这里用数组长度-1作为索引，避免count变量混乱
    const reviewerName = await getDataFNLN(idOfReviewer[AllReviewee.length - 1]);
    AllReviewer.push(reviewerName);
    console.log("second");
  }
}

// 执行函数并捕获可能的错误
processAllData().catch(error => console.error("处理出错：", error));

同时优化你的getDataFNLN函数，添加错误处理（避免firebase请求失败时Promise一直处于pending状态）：

function getDataFNLN(idRev){
    return new Promise((resolve,reject) => {
        const userRef = firebase.database().ref("users").child(idRev);
        userRef.once("value")
          .then(snap => {
            const userData = snap.val();
            if (!userData) {
              return reject(new Error(`ID为${idRev}的用户不存在`));
            }
            const fullName = `${userData.firstname} ${userData.lastname}`;
            resolve(fullName);
          })
          .catch(reject); // 捕获firebase请求的错误，传递给Promise的reject
    });
}

方案2：用Promise链式调用（不依赖ES7+语法） #

如果环境不支持async/await，可以用Array.prototype.reduce把循环迭代的Promise链接起来，实现串行执行：

const AllReviewee = [];
const AllReviewer = [];

// 将data的键转为数组，用reduce构建Promise链
Object.keys(data).reduce((chain, key) => {
  return chain.then(() => {
    // 先处理被评价者
    return getDataFNLN(idOfReviewee)
      .then(revieweeName => {
        AllReviewee.push(revieweeName);
        console.log("first");
        // 接着处理评价者
        return getDataFNLN(idOfReviewer[AllReviewee.length - 1]);
      })
      .then(reviewerName => {
        AllReviewer.push(reviewerName);
        console.log("second");
      });
  });
}, Promise.resolve()); // 初始Promise作为链的起点

为什么这样能解决问题？ #

不管用哪种方案，核心都是让每个循环迭代的两个异步操作依次完成后，再进入下一次迭代，而不是同时发起所有请求。这样就能保证每次迭代都会先输出first，再输出second，最终得到你预期的顺序。

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