如何通过参考异步操作深度嵌套的 object

Question

我正在做一个网格项目，我正在操作一个模式并基于它呈现页面。 因此，我将架构的引用传递给 function，其中 function 将操纵深度嵌套的 object，例如，

{
URL: "some.url"
paramas: {"some params}
}

至

{
URL: "some.url"
params: {"some params}
props:{
        data:[] || {}
    }
}

这种操作将基于 URL 和参数发生，所以我需要使用 forEach 循环，但不幸的是，forEach 循环不是异步的。

在这里，如果我想从其他模块操作所有这些对象（超过 100 个）并且它必须是异步的，我不知道我需要做什么。

演示架构：

{
      "name": "home",
      "path": "/",
      "header": "top_header",
      "footer": "bottom_footer",
      "rows": [
        {
          "row_class": "bg-white",
          "columns_class": "cols-66-33 cols-separated cols--height-equal",
          "column_1": [
            {
              "name": "Coral/HomeNews",
              "props": {
                "tag": "main"
              }
            }
          ],
         }
    ]
}

编辑：所以我从其他模块调用 function

await dataExtender(_schema);

其中包含一个功能（目前我正在开发它，但不完整）它是

const dataExtender = async _schema => {
  // Define forEach function

  console.log(chalk.green("Data Extending starts from module level"));

  

  await Promise.all(
    _schema.pages.forEach(async page => {
      page.rows.forEach(row => {
        row.column_1.forEach(async column => {
          if (column.url !== undefined) {
            await axios
              .post(column.url, column.param || {})
              .then(data => {
                console.log(chalk.green("Extending"));
                if (Array.isArray(data.data)) {
                  column.props.data = [...data.data];
                } else {
                  column.props.data = { ...data.data };
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        });
        if (row.column_2 !== undefined) {
          row.column_2.forEach(async column => {
            if (column.url !== undefined) {
              await axios
                .post(column.url, column.param || {})
                .then(data => {
                  column.props.data = data.data;
                })
                .catch(err => {
                  console.log(err);
                });
            }
          });
        }
      });
    }),
  );

  console.log(chalk.green("Data Extending finishes from module level"));
  return _schema;
};

Answer 1

虽然forEach本身不支持异步，但这并不能阻止您将异步修改承诺推送到列表中并在最后等待所有这些承诺。

import axios from "axios";

async function processColumn(column) {
  const data = await axios.post(column.url, column.param || {});
  console.log(chalk.green("Extending"));
  if (Array.isArray(data.data)) {
    column.props.data = [...data.data];
  } else {
    column.props.data = { ...data.data };
  }
}

async function processColumn2(column) {
  const data = await axios.post(column.url, column.param || {});
  column.props.data = data.data;
}

const dataExtender = async (_schema) => {
  console.log(chalk.green("Data Extending starts from module level"));
  const promises = [];

  _schema.pages.forEach((page) => {
    page.rows.forEach((row) => {
      row.column_1.forEach((column) => {
        if (column.url !== undefined) {
          promises.push(processColumn(column));
        }
      });
      if (row.column_2 !== undefined) {
        row.column_2.forEach((column) => {
          if (column.url !== undefined) {
            promises.push(processColumn2(column));
          }
        });
      }
    });
  });
  await Promise.all(promises);
  console.log(chalk.green("Data Extending finishes from module level"));
  return _schema;
};