如何正确调用多个getJSON API请求？解决异步返回undefined问题

Hey there, let's fix this async API chaining headache you're dealing with. The root cause of that undefined return is simple: your function finishes executing before any of the asynchronous getJSON requests complete. But since jQuery's $.getJSON() actually returns a Promise (or can be easily wrapped into one), we can use Promise chaining or async/await to ensure we only access results once all requests are done.

方案1：用Promise链式调用（.then()） #

This replaces your nested callbacks with a clean linear chain, where each request only runs after the previous one resolves:

// 链式调用示例
$.getJSON("url1")
  .then(function(res1) {
    // 用第一个请求的结果发起第二个请求
    return $.getJSON(`url2/${res1.id}`); // 假设需要拼接参数
  })
  .then(function(res2) {
    // 用第二个请求的结果发起第三个请求
    return $.getJSON(`url3/${res2.dataKey}`);
  })
  .then(function(finalRes) {
    // 所有请求完成！在这里处理最终结果
    console.log("全部请求完成，最终结果:", finalRes);
    // 如果需要把结果传递给外部，可以在这里触发回调或者返回值
  })
  .catch(function(error) {
    // 捕获任何一个请求的错误（网络问题、接口报错等）
    console.error("请求过程出错:", error);
  });

为什么这能解决问题？ #

Each .then() waits for the previous Promise (from getJSON) to resolve before running. By returning the next getJSON call inside a .then(), we link the requests together sequentially. The final .then() only runs when all prior requests have succeeded, so you'll always have the complete data here.

方案2：用async/await（更直观的同步风格） #

If you prefer code that reads like synchronous logic, async/await is perfect—it's just syntactic sugar for Promises:

// 封装成async函数
async function fetchAllData() {
  try {
    // 等待第一个请求完成，拿到结果
    const res1 = await $.getJSON("url1");
    // 用res1发起第二个请求，等待完成
    const res2 = await $.getJSON(`url2/${res1.id}`);
    // 用res2发起第三个请求，等待完成
    const finalRes = await $.getJSON(`url3/${res2.dataKey}`);

    // 所有请求都完成了！返回结果或者直接处理
    console.log("全部请求完成，最终结果:", finalRes);
    return finalRes;
  } catch (error) {
    // 捕获任何请求的错误
    console.error("请求失败:", error);
    throw error; // 可以抛出错误让外部处理
  }
}

// 调用async函数（注意：async函数本身返回Promise）
fetchAllData().then(finalResult => {
  // 在这里拿到所有请求完成后的最终结果
  console.log("外部获取到的结果:", finalResult);
});

注意：旧版jQuery兼容 #

If you're using a jQuery version older than 3.0, $.getJSON() might not return a standard Promise. In that case, wrap it into a Promise manually:

function getJSONPromise(url) {
  return new Promise((resolve, reject) => {
    $.getJSON(url, resolve).fail(reject);
  });
}

// 然后用这个函数代替$.getJSON()，就能正常用链式或async/await了
async function fetchAllData() {
  const res1 = await getJSONPromise("url1");
  // ...后续请求同上
}

为什么之前的函数返回undefined？ #

When you tried to return results directly from your function, the function executed all the getJSON calls (which are async) and immediately finished—before any of the requests had time to resolve. Using Promises or async/await forces the code to wait for each request to complete before moving on, ensuring you only access results once they're available.

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