如何在Gridsome项目中通过引用异步修改深层嵌套对象

原代码的核心问题是forEach方法没有返回值，你传入Promise.all的参数实际是undefined，且forEach内部的异步函数不会被外部等待，导致函数会在所有异步请求完成前提前返回，schema修改不生效。

const axios = require('axios')
const chalk = require('chalk')

// 抽离公共的列数据请求逻辑
const fetchColumnData = async (column) => {
  if (!column.url) return
  try {
    console.log(chalk.green("Extending"))
    const res = await axios.post(column.url, column.param || column.paramas || {})
    // 初始化props如果不存在的话
    if (!column.props) column.props = {}
    column.props.data = Array.isArray(res.data) ? [...res.data] : {...res.data}
  } catch (err) {
    console.error(err)
  }
}

const dataExtender = async (_schema) => {
  console.log(chalk.green("Data Extending starts from module level"))
  // 收集所有异步任务
  const tasks = []

  _schema.pages.forEach(page => {
    page.rows.forEach(row => {
      // 收集column1的请求任务
      row.column_1.forEach(column => {
        tasks.push(fetchColumnData(column))
      })
      // 收集column2的请求任务
      if (row.column_2) {
        row.column_2.forEach(column => {
          tasks.push(fetchColumnData(column))
        })
      }
      // 如果还有column3/4之类的可以按相同逻辑扩展
    })
  })

  // 等待所有请求完成
  await Promise.all(tasks)

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

• 手动收集所有异步请求任务到数组中，再传入Promise.all等待全部执行完成，保证所有schema修改完成后函数才返回
• 抽离重复的请求逻辑，减少代码冗余，同时新增了column.props的初始化逻辑，避免原对象没有props字段时报错
• 兼容了param和paramas两种参数字段，你可以根据实际schema的字段名调整
• 所有请求并发执行，100+个对象的修改也能保证执行效率
  如果你的schema里还有其他嵌套的column字段，可以按照相同的逻辑往tasks数组里加请求任务即可

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