数组在异步函数中将元素推入其中后打印为空

Question

我是异步/等待的新手。当我调用该函数时，第一个 console.log(newArr) 打印数组元素，但第二个是空数组，当我返回空数组时。有人可以帮我解决我哪里出错了。

const prefixPM = 'PM';
    const decryptComment = (comment) => {
          const data = decrypt(comment).then(function (result) {
            const buf2 = Buffer.from(result, 'base64').toString('ascii');
            return buf2;
          });
          return data;
        };
    
const pmData = await queryInterface.sequelize.query(
      `select ram.id, ra.name from rater_attributes ra
      inner join rater_attribute_mappings ram
      on ra.id = ram.raterAttributeId
      inner join attributes a
      on a.id = ram.by
      where a.name='Project Manager'`,
      { raw: true, type: Sequelize.QueryTypes.SELECT },
    );

const createPMAttributes = (ratingId, rating) => {
      const newArr = [];
      pmData.map(async (data) => {
        const attribute = `${prefixPM}${data.name}`;

        let pmComment = rating.PMComment
          ? await decryptComment(rating.PMComment)
          : null;
        pmComment = JSON.parse(pmComment);
        newArr.push({
          ratingId: ratingId,
          raterAttributeMappingId: data.id,
          rating: rating[`${attribute}`],
          comment:
            pmComment && pmComment[`${attribute}Comment`] ? pmComment[`${attribute}Comment`] : null,
          createdAt: rating.createdAt,
          updatedAt: rating.updatedAt,
        });
      console.log(newArr) -- this prints the newArr elements
      });
      console.log(newArr); -- this prints empty arr
return newArr 
    };

Answer 1

.map() 不支持异步，因此它会在await 被击中时并行运行循环的所有迭代，开始第二次迭代）。因此，您的第二个 console.log() 正在尝试在任何回调完成之前记录 newArr，因此在他们将数据放入 newArr 之前。

这是发生的顺序。

1. 您拨打pmData.map()
2. 它抓取pmData 数组中的第一个元素并调用回调
3. 回调执行 await decryptComment(...) 导致回调暂停并立即返回一个承诺
4. .map() 得到该承诺并将其累积为来自 .map() 的返回值
5. .map() 然后获取pmData 数组中的下一个值并再次调用回调，即使第一个仍在等待await decryptComment()

因此，您最终会并行运行所有这些，并且您的 .map() 在任何回调完成之前完成。

解决方案是在返回的承诺数组上使用await Promise.all()，如果您希望这些承诺并行运行，或者切换到for 循环，这将在await 被命中时暂停循环。

这是一个解决方案，同时仍然并行运行所有调用。这将返回一个解析为您的值数组的承诺。

const createPMAttributes = (ratingId, rating) => {
    return Promise.all(pmData.map(async (data) => {
        const attribute = `${prefixPM}${data.name}`;

        let pmComment = rating.PMComment ?
            await decryptComment(rating.PMComment) :
            null;
        pmComment = JSON.parse(pmComment);
        return {
            ratingId: ratingId,
            raterAttributeMappingId: data.id,
            rating: rating[`${attribute}`],
            comment: pmComment && pmComment[`${attribute}Comment`] ? pmComment[
                `${attribute}Comment`] : null,
            createdAt: rating.createdAt,
            updatedAt: rating.updatedAt,
        };
    }));
};

而且，这是一个使用for 循环的解决方案，它按顺序运行操作：

const createPMAttributes = async (ratingId, rating) => {
    const newArr = [];
    for (let data of pmData) {
        const attribute = `${prefixPM}${data.name}`;

        let pmComment = rating.PMComment ?
            await decryptComment(rating.PMComment) :
            null;
        pmComment = JSON.parse(pmComment);
        newArr.push({
            ratingId: ratingId,
            raterAttributeMappingId: data.id,
            rating: rating[`${attribute}`],
            comment: pmComment && pmComment[`${attribute}Comment`] ? pmComment[
                `${attribute}Comment`] : null,
            createdAt: rating.createdAt,
            updatedAt: rating.updatedAt,
        });
    }
    return newArr;
};

---

这是一个一般性提示。仅当您真正想要使用它生成的返回数组时才使用.map()。如果您要做的只是使用它来迭代数组，那么请改用for 循环，因为它更加灵活并且可以识别async。

而且，如果您因为使用 await 而将 .map() 回调为 async，那么您将并行运行所有操作，并且知道何时完成的唯一方法是在您的回调生成的承诺数组上使用Promise.all()。请记住，每个async 函数都会返回一个promise - 总是。因此，let resultArr = someArr.map(async => {} {}) 将始终生成一组承诺，告诉您事情何时真正完成。