如何将jQuery $.post的done回调结果返回至外部调用？

问题场景 #

开发REST API时，后端PHP已完成，前端通过jQuery/Ajax实现交互，希望apiCall函数返回$.post请求done回调中的响应数据，但调用apiCall()时，打印结果是jqXHR对象而非期望的response。

原apiCall函数代码 #

function apiCall($methode = '', $value = ''){
  return $.post(endpoint, {'apiKey': apiKey, contentType: 'application/json; charset=utf-8',async: false,dataType: "json"}).done(function (response){console.log('inner response: ' + response['status']);return response});
}

控制台输出 #

1. jqXHR对象：

{
    "readyState": 4,
    "responseText": "{\"status\":\"ok\"}",
    "responseJSON": {
        "status": "ok"
    },
    "status": 200,
    "statusText": "OK"
}

2. done回调内的日志：

inner response: ok

原调用代码 #

$(document).ready(function(){
  $("#my-submit").click(function (){
      console.log((apiCall()))
  });
});

用户尝试全局变量等方法均无效，后改用then方法实现需求：

$(document).ready(function(){
  $("#domain-report-submit").click(function (){
      apiCall().then((data) => console.log(data['status']));
  });
});

原方法失效的原因 #

• $.post本身返回的是jqXHR对象，该对象实现了Promise接口，用于跟踪异步请求的状态。
• .done()方法的作用是给jqXHR对象添加请求成功后的回调函数，它的返回值仍然是原jqXHR对象，而非回调函数中return response的值——这是jQuery设计的规则，.done()仅负责注册回调，不会改变原函数的返回类型。
• 即便设置了async: false（同步请求），.done()的返回逻辑也不会改变，同步请求只是阻塞浏览器等待请求完成，但.done()依然是注册回调的角色，无法让apiCall直接返回响应数据。

正确实现方式确认 #

你使用.then()的写法是完全正确的，原因如下：

• .then()是Promise标准方法，它会返回一个新的Promise对象，该Promise的resolve值就是回调函数中返回的data（即请求的响应数据）。
• 这种方式符合异步编程的规范，避免了同步请求阻塞浏览器的问题（不推荐使用async: false）。

优化后的apiCall函数（可选） #

可以调整函数写法，更清晰地传递参数并简化配置：

function apiCall(method = '', value = ''){
  // 把请求参数正确传递到后端，同时简化dataType配置
  return $.post(endpoint, {
    apiKey: apiKey,
    method: method,
    value: value
  }, 'json')
  .done(function(response){
    console.log('inner response: ' + response['status']);
  });
}

调用示例 #

$(document).ready(function(){
  $("#domain-report-submit").click(function (){
    apiCall('your-method', 'your-value').then((data) => {
      console.log(data['status']);
      // 这里可以编写拿到响应后的业务逻辑
    });
  });
});

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