JavaScript两次API调用问题：如何正确获取双响应并处理？

嘿，这个问题我之前也碰到过！你的代码问题出在第二个API调用的Promise没有被正确等待——你在第一个.then里直接把apiCall2(params2)放进数组，但它返回的是一个Promise对象，不是实际的响应结果。所以data数组其实是[response1, Promise]，当你在someFunction里访问data[1]的属性时，自然会因为Promise没有对应属性而报undefined。

下面给你几个正确的实现方案：

方案1：并行调用（推荐，效率更高） #

如果两个API调用互相独立，不需要依赖对方的结果，用Promise.all是最优解，它会同时发起两个请求，等都完成后把结果按顺序组成数组：

function f() {
  Promise.all([apiCall1(params1), apiCall2(params2)])
    .then(data => someFunction(data)) // data就是[res1, res2]
    .catch(err => console.error('请求出现错误:', err));
}

方案2：串行调用（如果第二个请求依赖第一个的结果） #

如果apiCall2需要用到response1的内容，那得先等第一个请求完成，再发起第二个，并且要等待它的结果：

function f() {
  apiCall1(params1)
    .then(response1 => {
      // 等待第二个API调用完成后，把两个结果组成数组返回
      return apiCall2(params2).then(response2 => [response1, response2]);
    })
    .then(data => someFunction(data))
    .catch(err => console.error('请求出现错误:', err));
}

方案3：用async/await让代码更易读 #

现在更推荐用async/await语法，把异步代码写得像同步代码一样，逻辑更清晰：

async function f() {
  try {
    const response1 = await apiCall1(params1);
    const response2 = await apiCall2(params2);
    someFunction([response1, response2]);
  } catch (err) {
    console.error('请求出现错误:', err);
  }
}

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