一个按钮提交 AJAX，另一个按钮查询该 AJAX 的结果

Question

这个问题是我尝试学习 promises 和 deferreds 的一部分。假设您有一个提交POST 的按钮：

$("#submit").click( function() {
  $.post({...})
})

我的理解是 AJAX 本身就是一个承诺（这很明显），所以我想做的是，当用户点击 #check 时，它会在完成后返回 AJAX 的输出（假设#check 只能在点击 #submit 之后才会被点击。

我认为这很简单，所以我的初始代码是：

$("#check").click(function() {
  $.when($.post({...})).done( function(data) {
    console.log("data")
  })  
})

但我意识到，在这个实现中，AJAX 不会启动 POSTing，直到点击 #check。不需要任何 #submit 按钮，在 #submit 中使用 AJAX .post 是多余的。

有没有办法使用 promises/deferreds 来实现我正在做的事情？

Answer 1

只存储post返回的promise。

var myPromise = null;
$("#submit").click( function() {
  myPromise = $.post({...});
});

$("#check").click(function() {
  if (myPromise) {
    myPromise.then( function(data) {
      console.log("data");
    });
  }
});

我所做的其他更改是使用 then() 而不是 done()（接受成功、失败或进度的单个函数），并且我添加了语句结尾的分号（因为自动插入分号会杀死小狗）。

一旦你完成了对 Promise 的研究，请迅速转到 observables。有了 JavaScript，乐趣就永远不会停止。

Answer 2

基于对问题的评论：

我想通过 AJAX 提交一些东西，但是我想在单击按钮检查后才使用该 AJAX 的结果。

您可能过于复杂了。您真的不需要剖析 AJAX 请求/承诺/等。在这两个按钮之间。只需在第一个按钮中发出请求并存储结果，然后在第二个按钮中使用结果。就这么简单：

// disable the check button until there is a result to check
$('#check').prop('disabled', true);

var ajaxResult;

$("#submit").click( function() {
    $.post({...})
     .done(function (result) {
         // any other logic you want to put here, then...
         ajaxResult = result;
         $('#check').prop('disabled', false);
     });
})

$('#check').click(function() {
    // the result is in ajaxResult, use it as needed here
});

基本上，“检查”按钮与 AJAX 没有任何关系。它只是对内存中存在的数据执行操作。成功获取该数据后，该按钮就会被启用。

Answer 3

您可以在按下#submit 按钮时创建一个Promise，然后使用它为#check 按钮建立一个处理程序。

$("#submit").click(function() {
  var requestPromise = $.post( "xxx", function(response) {
    // do something here
  })
  .fail(function() {
     alert( "error" );
  })
  $("#check").click(function() {
    requestPromise.done(function(response) {
      // do something meaningful with response here, or other logic
    });
    // disable #check button and remove click handler here
  }
  // enable #check button here
})

编辑 - 应 OP 的要求

这是使用兼容 Promise 的版本：

    $("#submit").click(function() {
      var requestPromise = new Promise(function(resolve, reject) {
        $.post( "xxx", function(response) {
          // do something here
          resolve(response);
        })
        .fail(function(response) {
           alert( "error" );
           reject(response);
        });
      });
      $("#check").click(function() {
        requestPromise.then(function(response) {
          // do something meaningful with response here, or other logic
        });
        // disable #check button and remove click handler here
      }
      // enable #check button here
    })