JavaScript return 行为异常：jQuery异步请求返回值问题

嘿，这个问题其实是异步JavaScript里非常常见的坑，我来给你拆解一下原因和解决办法：

问题根源：异步操作的执行顺序 #

你遇到的核心问题是**$.post是异步HTTP请求**——这意味着当你调用getItemDescription('2')时，函数会立刻发起请求，但不会等待请求完成就继续往下执行，直接结束函数。而你写在.done()和.fail()里的return语句，是在请求成功/失败后才会触发的回调函数里的代码，这时候getItemDescription早就已经执行完毕了，所以这些return根本不会影响到函数的返回值（实际上这个函数默认返回的是undefined）。

解决方案：用异步方式处理结果 #

既然是异步操作，我们就不能用同步的思路去拿返回值，下面是几种常用的解决方法：

方法1：使用回调函数（最经典的异步处理方式） #

修改getItemDescription，让它接受一个回调函数作为参数，在请求完成后调用这个回调传递数据：

function getItemDescription(id, callback) {
  $.post("item_description.php", {id:id})
    .done(function(data) {
      callback(null, data); // 成功时：第一个参数传错误（null表示无错误），第二个传数据
    })
    .fail(function() {
      callback('error'); // 失败时：直接传递错误信息
    });
}

然后调用的时候改成这样：

$(document).on('click', '#myElement', function(){
  getItemDescription('2', function(err, data) {
    if (err) {
      alert(err);
    } else {
      alert(data);
    }
  });
});

方法2：返回Promise对象（更现代的写法） #

jQuery的$.post本身就返回一个Promise对象，我们可以直接返回它，然后用.then()处理结果：

function getItemDescription(id) {
  return $.post("item_description.php", {id:id})
    .then(function(data) {
      return data;
    })
    .catch(function() {
      return 'error';
    });
}

调用时用.then()接收结果：

$(document).on('click', '#myElement', function(){
  getItemDescription('2')
    .then(function(result) {
      alert(result);
    });
});

方法3：使用async/await（最简洁的异步语法） #

如果你的运行环境支持ES2017+（现代浏览器基本都支持），可以用async/await让异步代码看起来像同步代码：

function getItemDescription(id) {
  // 直接返回Promise，失败时返回'error'
  return $.post("item_description.php", {id:id})
    .catch(function() {
      return 'error';
    });
}

// 把点击事件处理函数标记为async
$(document).on('click', '#myElement', async function(){
  const result = await getItemDescription('2');
  alert(result);
});

总结 #

记住：异步操作的结果不能通过同步return获取，必须通过回调、Promise或者async/await这类异步模式来处理。你看到网络面板里请求成功了，说明数据已经拿到了，只是拿结果的方式不对而已~

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