如何解决返回Ajax GET JSON响应的函数返回值为undefined的问题？

这是因为Ajax请求是异步操作：当你调用validateTagRequest时，浏览器会立刻发送请求，但不会停下来等待服务器响应，而是直接继续执行后面的var response = ...和useResponse(response)代码。这时候success回调还没执行，函数没有返回任何值，所以response就是undefined。

下面给你几种靠谱的解决方法：

方法1：使用回调函数（传统但实用） #

修改函数，让它接受一个回调参数，在请求成功后把数据传给这个回调：

function validateTagRequest(fileName, callback) {
  $.ajax({
    type: "GET",
    dataType: "json",
    url: "/tags/find-tag/" + fileName.tag,
    success: function(data) {
      console.log(data);
      callback(null, data); // 成功时传递数据
    },
    error: function(xhr, status, err) {
      callback(err, null); // 失败时传递错误信息
    }
  });
};

// 调用方式
validateTagRequest(fileName, function(error, response) {
  if (error) {
    console.error("请求出错了：", error);
    return;
  }
  useResponse(response); // 这里就能正常使用数据了
  console.log(response);
});

方法2：使用Promise（现代推荐方案） #

从jQuery 1.5开始，$.ajax本身就会返回一个Promise对象，我们可以直接利用这个特性重构函数：

function validateTagRequest(fileName) {
  return $.ajax({
    type: "GET",
    dataType: "json",
    url: "/tags/find-tag/" + fileName.tag
  });
};

// 方式A：用then链式调用
validateTagRequest(fileName)
  .done(function(data) {
    console.log(data);
    useResponse(data);
  })
  .fail(function(xhr, status, err) {
    console.error("请求失败：", err);
  });

// 方式B：用async/await（更像同步代码的写法）
async function handleTagValidation() {
  try {
    const response = await validateTagRequest(fileName);
    useResponse(response);
    console.log(response);
  } catch (err) {
    console.error("请求出错：", err);
  }
}

handleTagValidation();

关键提醒 #

不管用哪种方法，都别忘了处理请求失败的情况（比如网络错误、服务器返回错误），不然遇到问题时你会找不到原因哦～

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