jQuery .done 没有按预期返回

Question

我知道这是我的一个误解，我正在努力了解我做错了什么，我真的可以使用一些帮助。

我有一个成功的 ajax 请求并返回数据就好了。 Api 返回一个错误代码，然后我尝试根据给定的代码返回响应，除了该函数仅返回 ajax 调用传递的内容。

function getData(){
    var promise = $.ajax({
       url: 'api.php',
       type: 'POST',
       dataType: 'json'
    });
    return promise.done(function(data){
        console.log(data);
        if(data.errorCode === 0){
            return data;
        } else {
            return 'failed';
        }
    });
}
$(document).ready(function(){
   $('.btn').click(function(){
       var apiData = getData();
       console.log(apiData);
   });
});

所以如果 api 返回一个非 0 的错误代码，那么函数 getData 应该返回一个“失败”字符串，除了它返回数据元素。我知道代码不是0，因为console.log显示代码是999。我做错了什么？为什么我不能让它返回我的“失败”字符串？

Answer 1

getData 不（也不能）返回数据或"failed"；它返回一个承诺。你像在getData 中所做的那样消耗这个承诺：

$(document).ready(function(){
   $('.btn').click(function(){
       getData().done(function(apiData) {   // **
           console.log(apiData);            // **
       });                                  // **
   });
});

在该回调中，apiData 将是您在 getData 中返回的任何回调，因此它将是数据对象或字符串 "failed"。

（我在那里使用了done，因为它是你在其他地方使用的，但通常我会使用then，标准的promise函数。）

关于 Promise 要理解的关键点之一是 then（和 done）返回一个新的 Promise（从技术上讲，对于真正的 Promise，一个 thenable ) 将根据回调的作用来解决。

所以考虑一下（让我们暂时坚持使用 jQuery 的 Deferred）：

function doSomething() {
  var d = $.Deferred();
  setTimeout(function() {
    // Resolve our promise with "a"
    d.resolve("a");
  }, 10);
  return d.promise();
}

// Consume the promise and put it through a chain:
doSomething()
  .then(function(result) {
    // This callback happens to do synchronous processing
    console.log("First callback got", result);
    return result.toUpperCase();
  })
  .then(function(result) {
    // This one does something async, and so it returns a promise
    var cd = $.Deferred();
    setTimeout(function() {
      console.log("Second callback got", result);
      cd.resolve(result + result);
    }, 10);
    return cd.promise();
  })
  .then(function(result) {
    console.log("Third callback got", result);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

输出是

第一个回调得到了 第二个回调得到 A 第三次回调得到AA

现在，我之前说过then 总是返回一个承诺（thenable）。当我的第一个回调是同步的并直接返回一个值，但我的第二个回调是异步的并返回一个承诺时，它是如何做到的？ then 函数查看回调的返回值，如果它是“thenable”（带有then 的东西），则返回它；如果它不可用，它会创建一个新的、已解决的 Promise，并将该值作为分辨率值。

---

为了完整起见，这是上面带有原生 JavaScript 承诺的示例（需要浏览器支持）：

function doSomething() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      // Resolve our promise with "a"
      resolve("a");
    }, 10);
  });
}

// Consume the promise and put it through a chain:
doSomething()
  .then(function(result) {
    // This callback happens to do synchronous processing
    console.log("First callback got", result);
    return result.toUpperCase();
  })
  .then(function(result) {
    // This one does something async, and so it returns a promise
    return new Promise(function(resolve) {
      setTimeout(function() {
        console.log("Second callback got", result);
        resolve(result + result);
      }, 10);
    });
  })
  .then(function(result) {
    console.log("Third callback got", result);
  });

输出是

第一个回调得到了 第二个回调得到 A 第三次回调得到AA

Answer 2

根据http://api.jquery.com/jquery.ajax/ 文档，您可以链接.done, .fail, .always or .then。

$(document).ready(function() {
  $('.btn').click(function() {
    $.ajax({
       url: 'api.php',
       type: 'POST',
       dataType: 'json'
    })
    .done(function(data) {
        console.log(data);
        if (data.errorCode === 0) {
            console.log(data)
        } else {
            console.log(data)
        }
    });
  });
});

这会起作用