如何让JavaScript等待独立函数中发起的Ajax调用完成

首先得戳破核心：你遇到的问题本质是JavaScript异步操作的特性——AJAX调用是异步执行的，你的封装函数会在AJAX请求完成前就先返回，导致后续代码拿不到最终解析好的数组结果。

下面给你两种实用的解决思路，适配不同的代码风格：

思路1：让封装函数返回Deferred对象（兼容你熟悉的$.when逻辑） #

直接把AJAX调用产生的Deferred对象返回出去，这样调用方就能像你直接用$.when那样，通过.done()回调拿到结果：

function fetchData() {
  // 直接返回AJAX请求的Deferred对象
  return $.ajax({
    url: '你的接口地址',
    type: 'GET',
    dataType: 'json'
  }).done(function(response) {
    // 在这里完成数据解析，返回处理后的数组
    return 解析后的数组;
  }).fail(function(err) {
    console.error('请求出错:', err);
  });
}

// 调用方式和你直接用$.when的逻辑完全一致
fetchData().done(function(resultArray) {
  // 这里拿到的就是最终解析好的数组，放心执行后续逻辑
  console.log('请求结果:', resultArray);
}).fail(function(err) {
  // 统一处理请求失败的情况
});

这种写法完全贴合你已经熟悉的jQuery异步处理逻辑，不需要额外学习新语法。

思路2：用async/await写更直观的异步代码 #

如果你的运行环境支持ES6+，可以用async函数把异步代码写成“同步风格”，可读性更高：

async function fetchData() {
  try {
    // 用await等待AJAX请求完成
    const response = await $.ajax({
      url: '你的接口地址',
      type: 'GET',
      dataType: 'json'
    });
    // 解析响应数据成目标数组
    const resultArray = 解析后的数组;
    return resultArray;
  } catch (err) {
    console.error('请求失败:', err);
    throw err; // 抛出错误让调用方处理
  }
}

// 调用时要在async函数内，或者用.then()
async function handleResult() {
  try {
    const finalResult = await fetchData();
    console.log('最终结果:', finalResult);
    // 在这里执行所有依赖该数组的后续代码
  } catch (err) {
    // 处理请求失败的情况
  }
}

handleResult();

为什么之前的封装会失效？ #

如果你的原函数是直接尝试return数组，那肯定行不通——AJAX还没完成时，函数就已经返回了，此时要么返回undefined，要么返回一个空数组，等AJAX请求完成后这个值也不会自动更新。必须通过异步的方式传递结果，也就是回调、Promise/Deferred或者async/await这类方案。

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