为什么 then() 链式方法不是按顺序运行？

Question

我们正在尝试按特定顺序执行多个 AJAX 调用。以下代码具有 methodA、methodB 和 methodC（每个 returns 一个 AJAX promise 对象运行 async=true).

它们在 jQuery.

中使用 then() 函数链接

 self.methodA().then( self.methodB() ).then( self.methodC() )

我已经把其中一个方法变慢了（methodB）（我用的是慢URL）。

我希望 A... 10 秒等待...然后 B 然后 C.

相反，我得到 A，C ....10 秒等待和 B。

为什么要这样做？和我在always()函数中使用alert()有关系吗？

这是我在 fiddle 中的代码： http://jsfiddle.net/h8tfrvy4/13/

代码：

function Tester() {
    var self = this;
    this.url = 'https://public.opencpu.org/ocpu/library/';
    this.slowurl = 'http://fake-response.appspot.com/?sleep=5';


    this.save = function() {
        self.methodA().then( self.methodB() ).then( self.methodC() )
    }

    this.methodA = function () {
        var self = this;

        return $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {

            //check for errors... and if OK
            alert('A OK');


        })
    }
    this.methodB = function () {
        var self = this;

        return $.ajax({
            url: self.slowurl,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {

            //check for errors... and if OK
            alert('B OK');


        })
    }
    this.methodC = function () {
        var self = this;

        return $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {
            //OK
            alert('C OK');

        })
    }
}
new Tester().save();

Answer 1

简短：

this.save = function() {
    self.methodA().then( self.methodB ).then( self.methodC )
}

@meagar 是对的，我在这件事上错了，但我确信我是对的，这让我困扰了整整 **&^*$& 天。他的回答似乎太复杂了，但我早上脑袋昏昏沉沉的，我的答案也不对。这个是正确的答案，当你将它插入 JSFiddle 时它可以完美地工作。

Answer 2

这是错误的：

self.methodA().then( self.methodB() ).then( self.methodC() )

您正在立即调用每个方法，并将承诺传递给then。

如果你想让每个函数等到前一个完成，你需要给每个 then 一个回调，以便在前一个 promise 解析时执行：

self.methodA().then(function () { return self.methodB() }).then(function() { return self.methodC() });

为什么 then() 链式方法不是按顺序运行？

Why is then() chained methods not running sequentially?

javascript

ajax

jquery

promise

为什么 then() 链式方法不是按顺序 运行？

Why is then() chained methods not running sequentially?

javascript

ajax

jquery

promise

为什么 then() 链式方法不是按顺序运行？