基于axios实现同步异步结合POST嵌套父子对象以保留插入顺序

实现方案 #

以下是完全符合提交规则的axios实现逻辑，无冗余等待，效率最优：

import axios from 'axios'

// 封装单个Person节点的提交请求，可自行添加超时、重试等兼容逻辑
const postSinglePerson = async (person, parentId) => {
  const response = await axios.post('/你的后端接口地址', {
    name: person.name,
    parent_id: parentId
  })
  return response.data.id // 提取接口返回的当前节点唯一id
}

// 核心递归提交函数
const postPersons = async (persons, parentId) => {
  // 递归终止条件：当前批次无需要提交的节点
  if (!persons || persons.length === 0) return Promise.resolve()

  // 第一步：提交当前批次第一个节点，保证同层级顺序
  const currentPerson = persons[0]
  const currentNodeId = await postSinglePerson(currentPerson, parentId)

  // 第二步：并行执行两个互不阻塞的任务
  // 任务1：递归提交当前节点的所有子节点（父节点已提交，满足先父后子规则）
  // 任务2：提交当前批次剩余的同级节点（保证同层级顺序的前提下，和当前节点的子树并行提交）
  return Promise.all([
    postPersons(currentPerson.children, currentNodeId),
    postPersons(persons.slice(1), parentId)
  ])
}

// 调用示例
const family_name = "The Numbers";
const family = [/* 你的嵌套Person数组 */];

// 启动全局提交，可通过then/catch处理最终结果
postPersons(family, family_name)
  .then(() => console.log('所有节点提交完成'))
  .catch(err => console.error('提交失败，错误信息：', err))

规则匹配验证 #

1. 先父后子：所有子节点的提交都在父节点提交成功、拿到返回id之后触发，完全符合关联要求
2. 同层级顺序提交：每个批次的节点永远先提交数组第一个元素，成功之后才会处理剩余同级节点，保证后端接收顺序和数组顺序完全一致
3. 不同分支并行：当前节点提交完成后，它的子树提交和后续同级节点的提交互不阻塞、并行执行，完全符合你提到的「2提交成功后，3和2-1可同时提交」的要求，无不必要的等待

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