从第一个电话的承诺中获取第二个电话的响应

Question

getAjaxPromise(myUrl, true,   myType, myContentType, mySuccessFunction, myFailureFunction, myData, true)     .then(function(data)
 { 
//Do something with the data returned form second Ajax call. 
//But data returned here is from first ajax. 
});


self.getAjaxPromise = function(url, async, type,  contentType, successCallback, errorCallback, data, isSecureCall) 
{
  if (isSecureCall) {
    var tokenPromise = getTokenPromiseFromServer(); //Another Ajax call to get latest token from service
    tokenPromise.then(function(tokenData) {  //This then runs fine
      return $.ajax({
        beforeSend:  function(request) {
          request.setRequestHeader("authKey", tokenData.key);
        },
        url: url,
        async: async,
        type: type,
        contentType: contentType,
        success:
        successCallback,
        error: errorCallback,
        data: JSON.stringify(data)
      });
    });
  } else { //Just one ajax call 
    return $.ajax({
      beforeSend:   function(request) {
        request.setRequestHeader("authKey"      , "anonymous");
      },
      url: url,
      async: async,
      type: type,
      contentType: contentType,
      success: successCallback,
      error: errorCallback,
      data: JSON.stringify(data)
    });
  }
};

在上面的代码中，当我编写 .then() 时，我得到了第一个 ajax 调用的响应，我不需要第一个 ajax 的响应，而是我想在第一个 ajax 的 then() 中获取 ajax 的响应.

我怎样才能做到这一点？

P.S：我已经编辑了问题并添加了代码以供参考。

Answer 1

要使.then() 在外部函数上工作，您必须从该函数中返回顶级承诺，如下所示：

self.getAjaxPromise = function (url, async, type, contentType, data, isSecureCall) {
    if (isSecureCall) {
        // return the outer promise from the function so .then() will work
        return getTokenPromiseFromServer().then(function (tokenData) { //This then runs fine
            // return this ajax call to chain it to the previous promise
            return $.ajax({
                beforeSend: function (request) {
                    request.setRequestHeader("authKey", tokenData.key);
                },
                url: url,
                async: async,
                type: type,
                contentType: contentType,
                data: JSON.stringify(data)
            });
        });
    } else { //Just one ajax call 
        return $.ajax({
            beforeSend: function (request) {
                request.setRequestHeader("authKey", "anonymous");
            },
            url: url,
            async: async,
            type: type,
            contentType: contentType,
            data: JSON.stringify(data)
        });
    }
};

然后，您可以像这样调用它，所有结果都将返回到 .then() 处理程序中，并且任何错误都会一直传播回来：

 xxx.getAjaxPromise(...).then(function(result) {
     // sucessfull result here
 }, function(err) {
     // error here
 });

---

创建额外的承诺或延迟，正如另一个答案所建议的那样，考虑promise anti-pattern，因为它完全没有必要并且经常会产生错误处理问题。相反，你可以只返回你已经拥有的承诺，当你有一个嵌套的承诺时，你可以从 .then() 处理程序中返回它，它会自动链接到第一个承诺，并控制最终的结果承诺。这将允许您的外部 .then() 处理程序工作并获得正确的结果。

Answer 2

发生这种情况的原因是因为您正在返回来自return getTokenPromiseFromServer() 的承诺。在原始 ajax 调用完成之前，不会执行附加到该承诺的 .then 回调的 return 语句。因此，您的 .then 处理程序实际上是附加到来自 getTokenPromiseFromServer() 的承诺，而不是嵌套的 $.ajax 调用。

您需要对代码进行一些重构。 jQuery 提供了一种方法，在使用 $.when https://api.jquery.com/jquery.when/ 执行回调之前等待 promise 列表中的所有 promise 解决，根据您的需要，下面的选项可能更合适，但这是实现此目的的一种方法。

这是一个例子：

$.when(promise1, promise2, promise3).done(function (d1, d2, d3) {
    //d1 = data from promise1
    //d2 = data from promise2
    //d3 = data from promise3
});

当您执行代码以获取 Promise 时，您可以改为返回 Promise 列表并使用 $.when 等到所有 Promise 都得到解决。

如果您不关心来自getAjaxPromise 的外部getTokenPromiseFromServer()，则可以减少重构。在这种情况下，您可以手动创建一个延迟，从getAjaxPromise 返回，然后在getTokenPromiseFromServer() 的回调中，您可以像这样手动解决延迟。由于您要返回自己的延迟对象，因此 .then 处理程序将附加到该对象上，并且在您手动解决延迟对象之前不会执行（一旦嵌套的 $.ajax 被解决，您就可以执行此操作。使用这种方法，您可以嵌套任意数量的 ajax 调用，行为都是一样的。

if (isSecureCall) {
  var dfd = $.Deferred(); //create deferred
  getTokenPromiseFromServer().then(function(tokenData) {
    $.ajax({
      beforeSend: function(request) {
        request.setRequestHeader("authKey", tokenData.key);
      },
      url: url,
      async: async,
      type: type,
      contentType: contentType,
      success: successCallback, //Success callback runs fine, then() does not
      error: errorCallback, //Error callback runs fine, then() does not
      data: JSON.stringify(data)
    }).then(function( data, textStatus, jqXHR ) {
              dfd.resolve(data); //manually resolve the deferred which executes any callbacks attached to it
            });
  });
  return dfd; //return the deferred, which .then() will attach to
}

编辑 因为人们一直反对这个答案

正如@jfriend00 在他的回答中指出的那样，这被认为是一种承诺反模式，应该避免，因为它可能会在更复杂的场景中导致问题。感谢他纠正了我对 Promise 的理解。请参阅他的回答了解更多详情。

相反，可以通过简单地返回顶级承诺来链接承诺。并在返回的 Promise 上调用 .then，而不是手动创建一个 deferred 并解决它。

Answer 3

我不熟悉那个方法，但你为什么不在 jQuery Ajax 调用中使用简单的 jQuery Ajax 调用

$.ajax({//params)}.done(() => {   // other ajax  call.     
     $.ajax({  //params}).done((result) => {//target code
                                           }); 
})