javascript - 按照与 Ajax 请求相同的顺序处理 Ajax 响应

Question

我想保护我的代码，以确保按特定顺序由用户操作触发的多个 Ajax 请求将按相同顺序处理它们的响应。

我想保留Ajax的异步机制。只需保护我的代码，以避免可能导致我的网页困惑的乱序响应。

为了说清楚。让我们举个例子:

$('#button1').click(function(){
  $.ajax({url: 'dosomething1.html'})
    .done( function(){ console.log('something 1 success'); } )
    .fail( function(){ console.log('something 1 failure'); } );
});

$('#button2').click(function(){
  $.ajax({url: 'dosomething2.html'})
    .done( function(){ console.log('something 2 success'); } )
    .fail( function(){ console.log('something 2 failure'); } );
});

$('#button3').click(function(){
  $.ajax({url: 'dosomething3.html'})
    .done( function(){ console.log('something 3 success'); } )
    .fail( function(){ console.log('something 3 failure'); } );
});

如果用户点击“#button1”，然后点击“#button2”，然后点击“button3”，我想在控制台中看到:

>something 1 success
>something 2 success
>something 3 success

可能会发生响应未按服务器发送响应的顺序收到的情况。所以我想为这种情况做好准备。

注意:我无法提前知道用户触发的事件顺序。所以我需要找到一种方法来“即时”链接响应处理程序。

实现此目标的最佳解决方案是什么？

我是 Ajax 棘手的新手，今天我读了很多东西都没有找到解决方案(我想以某种方式延迟和 promise 对象可以解决问题)。请帮助我摆脱这种可怕的头痛。 :)

---

编辑以评论 Kevin B 的解决方案。

我绞尽脑汁想完全理解 Kevin B 的例子(确实有效)，直到我读到一本关于 Deferred 的书，书中解释了“then”函数实际上是创建一个新的 Deferred 并返回它的 promise 。

这是与前一个“链接”的新 promise 。它根据先前 promise 评估的结果(已解决或已拒绝)调用其成功或失败回调。

在我们的例子中，这意味着当先前的 promise 被评估时，“then” promise 也会被评估并将先前 promise 的结果(解决或拒绝)作为输入来决定调用哪个回调。在 kevin B 的代码中，两种情况(解决或拒绝)都会返回 ajax 请求 promise 。因此， promise 的 .fail 和 .done 回调仅在评估“then” promise 并且返回的 promise (ajax 请求一)被“解决”(.done 函数)或拒绝(.fail 函数)时调用。

更进一步:我的理解是，promise 是一种监听器，监听将来可能发生的事件。

在经典案例中，当事件发生时，延迟状态变为“已解决”或“已拒绝”状态，并调用 promise 回调。promise 正在“监听”要更改的 deferred 的状态。触发此状态更改的事件是初始事件(ajax 请求、超时、其他...)的解决或拒绝。

在“然后”的情况下，评估 promise 的触发事件是:评估引用的 promise (链中的先前 promise )(解决或拒绝)。给定评估结果，调用成功或失败回调。

我根据 Kevin 的代码提出了这个稍微重新组织的代码，以帮助像我这样的傻瓜更好地理解:

var currentPromise = $.Deferred().resolve().promise();

$('#button1').click(function(){

    var button1Promise = $.ajax({url: 'dosomething1.html'})

    var thenPromise = currentPromise.then(
        function () { return button1Promise;}, 
        function () { return button1Promise;}); // to also handle fail conditions gracefully

    currentPromise = thenPromise;

    // "thenPromise" callback functions are returning the promise linked to 
    // the ajax request. So this promise is "replacing" the "thenPromise". 
    // Hence "done" and "fail" functions are finally defined for the ajax request promise.
    thenPromise.done( function(){ console.log('something 1 success'); } );
    thenPromise.fail( function(){ console.log('something 1 failure'); } );
});

希望它能帮助那些不太熟悉 jquery 概念的人充分理解使用“then”函数的 promises 链。

如果我误解了什么，请不要犹豫发表评论。

Answer 1

如果您预先创建一个 promise，您可以不断链接它以获得您想要的效果。

// ajax mock
function sendRequest(v, delay) {
    var def = $.Deferred();
    setTimeout(function () {
        def.resolve(v);
    }, delay);
    return def.promise();
}

var ajaxPromise = $.Deferred().resolve().promise();
var delay = 600; // will decrement this with each use to simulate later requests finishing sooner

// think of this as a click event handler
function doAction (btnName) {
    delay -= 100;
    var promise = sendRequest(btnName, delay);
    ajaxPromise = ajaxPromise.then(function () {
        return promise;
    }).done(function () {
        console.log(btnName);
    });
}

doAction("1");
doAction("2");
doAction("3");

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

因为我将它们延迟了 500 毫秒、400 毫秒和 300 毫秒，所以直到 500 毫秒之后它们都没有记录。

这是使用相同技术的代码:

var ajaxPromise = $.Deferred().resolve().promise();
$('#button1').click(function(){
  var promise = $.ajax({url: 'dosomething1.html'})

  ajaxPromise = ajaxPromise.then(function () {
    return promise;
  }, function () {
    return promise; // to also handle fail conditions gracefully
  }).done( function(){ console.log('something 1 success'); } )
    .fail( function(){ console.log('something 1 failure'); } );
});

// repeat for other two buttons

重要的是所有的 ajax 请求总是会被立即发送，但是 done 和 fail 处理程序直到轮到他们时才会执行。