如何实现多循环下的链式Axios请求并提升执行效率？

我有三个关联的请求逻辑：

• Axios_Request_1 返回数组 Array_1；
• 遍历 Array_1 发起 Axios_Request_2，所有响应组成 Array_2；
• 遍历 Array_2 发起 Axios_Request_3，最终生成目标数组 Array_3。

我知道可以用Promise.all实现，代码如下：

let Array_1 = await Axios_Request_1

let Promise_1 = []
for (const ca of Array_1) {
   Promise_1.push(Axios_Request_2(ca))
}

let Array_2 = await Promise.all(Promise_1)

let Promise_2 = []
for (const product of Array_2) {
    Promise_2.push(Axios_Request_3(product ))
}

let Array_3 = await Promise.all(Promise_2)

但这种写法要等所有Axios_Request_2完成才会开始Axios_Request_3，效率不够高。我尝试了嵌套then的写法，想让每个Axios_Request_2完成后立刻发起对应的Axios_Request_3，但代码无法正常工作：

let Array_3 = []
Axios_Request_1.then(function(Array_1){
    for (const ca of Array_1) {

        Axios_Request_2(ca).then(Subarray_Array_2=>{

            for (const product of Subarray_Array_2) {

                Axios_Request_3(product).then(element_Array_3=>{

                    Array_3.push(element_Array_3)
                })
        })
})
console.log(Array_3);

我尝试加入Promise.all但没成功，想知道怎么实现这种更高效的链式请求逻辑。

解决方法 #

你的嵌套写法核心问题是：没有正确收集所有异步请求的Promise，无法等待全部请求完成；且console.log(Array_3)执行时所有异步操作还未结束，因此输出空数组。

要实现每个Axios_Request_2响应后立刻发起对应的Axios_Request_3（无需等待全部Request_2完成），可以把Promise.all嵌套到单个请求的回调中，同时收集所有最终请求的Promise：

写法一：then链式+嵌套Promise.all #

Axios_Request_1
  .then(Array_1 => {
    // 收集所有Request_2及其后续Request_3的Promise
    const allFinalPromises = Array_1.map(ca => {
      return Axios_Request_2(ca)
        .then(Subarray_Array_2 => {
          // 对当前Request_2的结果，批量发起Request_3并返回Promise.all
          return Promise.all(Subarray_Array_2.map(product => Axios_Request_3(product)))
        })
    })
    // 等待所有层级请求完成，再扁平化嵌套数组得到Array_3
    return Promise.all(allFinalPromises)
  })
  .then(nestedArray => {
    const Array_3 = nestedArray.flat(Infinity)
    console.log(Array_3)
    // 在这里处理最终结果
  })
  .catch(err => {
    console.error('请求出错:', err)
  })

写法二：async/await简化版（更易读） #

如果习惯async/await语法，逻辑和上面一致，只是写法更简洁：

async function fetchData() {
  try {
    const Array_1 = await Axios_Request_1
    // 遍历Array_1，每个元素对应Request_2+批量Request_3的Promise
    const promiseList = Array_1.map(async ca => {
      const Subarray_Array_2 = await Axios_Request_2(ca)
      return Promise.all(Subarray_Array_2.map(product => Axios_Request_3(product)))
    })
    // 等待所有请求完成，扁平化嵌套数组
    const nestedArray = await Promise.all(promiseList)
    const Array_3 = nestedArray.flat(Infinity)
    console.log(Array_3)
    return Array_3
  } catch (err) {
    console.error('请求出错:', err)
  }
}

fetchData()

效率优势说明 #

和你最初分两步用Promise.all的写法不同，这种方式会在单个Axios_Request_2响应后立刻启动对应的所有Axios_Request_3，无需等待全部Request_2完成再统一发起Request_3，整体总耗时更接近所有请求链路中最长的那条，效率更高。

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