Javascript jQuery延迟对象链接失败

为什么这个代码不起作用

在加载步骤2之前，它应该等待步骤1加载。目前，步骤2首先启动。我使用mockjax来模拟Ajax调用

$.mockjax({
    url: "/step1",
    responseTime: [3000, 4000],
    responseText: {
      status: "success",
      text: "Loading Step 1"
    }
});

$.mockjax({
    url: "/step2",
    responseTime: [100, 200],
    responseText: {
      status: "success",
      text: "Loading step 2"
    }
});


$.getJSON("/step1").then( function(response) {
    return  $("#message").html( "message: " + response.text );
})
.then(
    $.getJSON("/step2", function(response) {
            $("#message").html( "message: " + response.text );
    })                
)

---

getJSON step2首先触发，因为它的延迟更短，并且您实际上同时触发了两个$.getJSON

试试这个

$.getJSON("/step1").then( function(response) {
    return  $("#message").html( "message: " + response.text );
})
.then(
    function() { // added this
        $.getJSON("/step2", function(response) {
            $("#message").html( "message: " + response.text );
        })         
    } // and added this
)

---

更新：根据评论，$.when（）在这里是不必要的，并且应该在组合多个承诺时使用

我建议看一下使用-jsFiddle示例

---

公认的答案不太正确。这并不是真的把承诺拴在一起，因为：

$("#message").html( "message: " + response.text )

是一个同步函数，不返回承诺。因此，返回它返回的值不会创建承诺链。它适用于本例，但当您添加越来越多的承诺时，您会遇到麻烦

连锁承诺的正确方法是返回承诺：

someFunction().then(function(){return promise}).then(function(){});

因此，对于您的示例，正确的链接方式是：

$.getJSON("/step1")
.then( function(response) {
    $("#message").html( "message: " + response.text );
    return $.getJSON("/step2"); // <-------------- return a promise!
})
.then(function(response){
    $("#message").html( "message: " + response.text );
})

$.getJSON（“/step1”）
.然后（功能（响应）{
$（“#message”）.html（“message:+response.text”）；
return$.getJSON（“/step2”）；//指向
的参数。那么
应该是一个函数。我在任何地方都没有看到ES6承诺？这与ES6承诺无关。jQuery承诺是邪恶的。使用
Promise.cast（）
杀死它们。没有理由涉及
$。when（）
此处。只有当您有多个并行运行的承诺，并且您想知道所有承诺何时都完成时，这才有用。OP正在尝试进行串行链接，而不是尝试并行运行请求。感谢您提供的指针。您是否有进一步阅读此内容的链接？基于jQuery的开始$.when（）docs（）-第一节讨论传递一个延迟，然后是$.then（）。传递一个承诺给
$。当（）
起作用时，就没有意义了。你可以只做
$.getJSON（…）。然后（…）
这样做
$就没有意义了。当（$.getJSON（…）。然后（…）
.when（）
带有一个承诺的
$。when（）
只是多余的、不必要的代码。when（）
的用处是当您有多个承诺时。很抱歉，这个答案是错误的。a
.then（）
处理程序可以运行返回值的同步代码-它不必返回承诺。如果这样做，则链中的下一个
。然后（）
处理程序将在同步代码完成时运行。请记住，
。然后（）
处理程序的返回值将传递给下一个
。然后（）
作为函数参数在链中处理程序。它不是
.then（）
本身的返回值。这不像对象链，每个方法都必须返回对象本身（已经由
.then（）
方法本身处理）。这与此工作方式截然不同。
$.mockjax（）。然后（…）.then（…）
运行正常，无论
处理程序中运行的是什么代码。then（）
处理程序中运行的是什么。then（）

处理程序决定

运行的时间。then（）

将调用回调。如果您返回一个承诺，则它将等待该承诺得到解决，然后再继续该链。如果您返回一个值，则该值仅传递给下一个

。then（）

处理程序。

$.getJSON("/step1")
.then( function(response) {
    $("#message").html( "message: " + response.text );
    return $.getJSON("/step2"); // <-------------- return a promise!
})
.then(function(response){
    $("#message").html( "message: " + response.text );
})