Ajax异步请求致函数返回错误值，求解决方案

你的问题核心在于AJAX请求是异步执行的，函数执行到return linkTypes时，请求还没完成，所以返回的是初始空数组。要解决这个问题，必须让函数等待AJAX请求完成后再返回结果，常用方案是使用Promise或async/await：

方案一：改造函数返回Promise #

直接让getLink返回一个Promise对象，请求完成后再resolve结果：

function getLink() {
  // 已有缓存数据，直接返回resolved的Promise
  if (linkTypes.length > 0) {
    return Promise.resolve(linkTypes);
  }

  // 发起AJAX请求，返回Promise
  return $.ajax({
    type: "GET",
    url: "/theServiceToCall.html",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
  })
  .done((response) => {
    linkTypes = JSON.parse(response.d);
    return linkTypes;
  })
  .fail((error) => {
    console.log(error?.responseJSON?.Message);
    throw error; // 抛出错误，让调用方可以捕获处理
  });
}

调用方式 #

通过.then()获取异步返回的结果：

getLink().then(result => {
  // 这里拿到的是请求完成后的linkTypes
  // 后续业务逻辑写在这里
  console.log(result);
}).catch(err => {
  // 处理请求失败的情况
});

方案二：使用async/await简化异步流程 #

将getLink声明为异步函数，用await等待AJAX请求完成：

async function getLink() {
  // 已有缓存数据，直接返回
  if (linkTypes.length > 0) {
    return linkTypes;
  }

  try {
    // await等待AJAX请求完成
    const response = await $.ajax({
      type: "GET",
      url: "/theServiceToCall.html",
      dataType: "json",
      contentType: "application/json; charset=utf-8",
    });
    linkTypes = JSON.parse(response.d);
    return linkTypes;
  } catch (error) {
    console.log(error?.responseJSON?.Message);
    throw error; // 抛出错误供调用方处理
  }
}

调用方式 #

需要在异步函数中使用await，或者依然用.then()：

// 方式1：在async函数内调用
async function handleLinkData() {
  try {
    const result = await getLink();
    // 处理结果
    console.log(result);
  } catch (err) {
    // 处理错误
  }
}

handleLinkData();

// 方式2：用.then()兼容调用
getLink().then(result => {
  // 处理结果
}).catch(err => {
  // 处理错误
});

关键说明 #

• 异步操作无法通过同步return直接返回结果，必须通过Promise或async/await等待异步任务完成
• 两种方案都会保留linkTypes的缓存逻辑，后续调用时直接返回已加载的数据，避免重复请求

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