如何通過參考異步操作深度嵌套的物件

我正在處理一個 gridsome 專案，在那里我正在操作一個架構并基于它呈現頁面。所以，我將架構的參考傳遞給一個函式，該函式將操作一個深度嵌套的物件，例如，

{
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"
              }
            }
          ],
         }
    ]
}

編輯：所以我正在從其他模塊呼叫一個函式，比如

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;
};

uj5u.com熱心網友回復：

雖然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;
};

標籤：javascript 异步 异步等待

上一篇：如何將.env變數從docker-compose傳遞到入口點的腳本？

下一篇：如何等待多個請求