在异步函数中使用async/await及Promise嵌套调用问题求助

你这个问题很典型——在异步场景里处理数组映射时没正确处理异步函数的返回值。咱们来拆解一下问题原因，再给出修复方案：

问题根源 #

transactionDetails是一个async函数，调用它会立即返回一个Promise对象，而不是你想要的交易详情数据。你在response.data.map()的回调里直接把[transactionDetails(item.transaction_id)]赋值给trxDetails，此时这个字段存的只是未完成的Promise，自然看不到实际的结果。

修复方案 #

需要两步调整：

1. 把map的回调改成async函数，在调用transactionDetails时加上await，确保拿到实际数据
2. 用Promise.all()包裹整个map的结果，等待所有异步请求都完成后再返回最终数组

修改后的完整代码如下：

LastTransactions: async (transactionKey, page) => {
  const api = `https://api.pagar.me/1/payables?recipient_id=${transactionKey}&count=${totalResults}&page=${page}&api_key=${PagarmeApiKey}`;
  const response = await axios.get(api);
  
  // 用Promise.all等待所有异步请求完成
  const transactions = await Promise.all(response.data.map(async (item) => {
    return {
      id: item.id,
      transactionId: item.transaction_id,
      // 加上await获取实际的交易详情
      trxDetails: [await transactionDetails(item.transaction_id)],
    };
  }));
  
  return transactions;
},

async function transactionDetails(id){
  const response = await axios.get(`https://api.pagar.me/1/transactions/${id}?api_key=${PagarmeApiKey}`)
  const data = response.data;
  return data;
}

额外说明 #

• 当你在Array.map里使用async回调时，map会返回一个由Promise组成的数组，必须用Promise.all来等待所有Promise都resolve，才能得到包含实际数据的数组
• 不要忘记在transactionDetails调用前加await，否则即使外层用了Promise.all，拿到的还是Promise对象

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