javascript - 链接的 jQuery.then() - 下一个只有在前一个完全解析后才执行

Question

我有这个代码

$.when(
    // I checked the first one and assume all return promises
    datacontext.entity1.getPromise({ ...options... }),
    datacontext.entity2.getPromise({ ...options... }),
    datacontext.entity3.getPromise({ ...options... }),
    datacontext.entity4.getPromise({ ...options... }),
    datacontext.entity5.getPromise({ ...options... }),
    datacontext.entity6.getPromise({ ...options... }),
    datacontext.entity7.getPromise({ ...options... }),                    )
.then(
    // some more similar calls returning promises
    datacontext.entity8.getPromise({ ...options... }),
    datacontext.entity9.getPromise({ ...options... }),
    datacontext.entity10.getPromise({ ...options... }),
    datacontext.entity11.getPromise({ ...options... }),                    
)
.then(function() {
    // do work with the results
});

如果我理解正确的话，首先执行 then()直到 when() 中的所有延迟都不应启动已解决。那是对的吗？我是否应该对两者抱有同样的期望then()部分 - 即 // do work with the results不应在之前 then() 的所有调用之前到达解决了吗？在 Chrome 中似乎是这样，但在 FF 中我打的是​​最后一个 then()在所有延迟都得到解决之前。

那么根据评论，这是链接事物的正确方法吗？

$.when(
    // I checked the first one and assume all return promises
    datacontext.entity1.getPromise({ ...options... }),
    datacontext.entity2.getPromise({ ...options... }),
    datacontext.entity3.getPromise({ ...options... }),
    datacontext.entity4.getPromise({ ...options... }),
    datacontext.entity5.getPromise({ ...options... }),
    datacontext.entity6.getPromise({ ...options... }),
    datacontext.entity7.getPromise({ ...options... })
)
.then(function() {
    $.when(
        // some more similar calls returning promises
        datacontext.entity8.getPromise({ ...options... }),
        datacontext.entity9.getPromise({ ...options... }),
        datacontext.entity10.getPromise({ ...options... }),
        datacontext.entity11.getPromise({ ...options... })
    )
    .then(function() {
        // do work with the results
    });
})

Answer 1

在 jQuery 中，$.when(以及标准中的Promise.all)接受一个 Promise 列表，并返回一个在所有 Promise 解析时解析的 Promise。

.then 方法发出继续信号并接受履行和拒绝处理程序。当您从 .then 返回一个 Promise 时，仅当返回的 Promise 已解决时，它才会继续。当您返回一个值时，它将“立即”继续。

因此，您要做的是从第二个 then 处理程序返回 $.when:

$.when(
    // I checked the first one and assume all return promises
    datacontext.entity1.getPromise({ ...options... }),
    datacontext.entity2.getPromise({ ...options... }),
    datacontext.entity3.getPromise({ ...options... }),
    datacontext.entity4.getPromise({ ...options... }),
    datacontext.entity5.getPromise({ ...options... }),
    datacontext.entity6.getPromise({ ...options... }),
    datacontext.entity7.getPromise({ ...options... }))
.then(function(){ // our handler, note that its params are the resolution values

    return $.when( // which will resolve when this composite promise will resolve
    // some more similar calls returning promises
    datacontext.entity8.getPromise({ ...options... }),
    datacontext.entity9.getPromise({ ...options... }),
    datacontext.entity10.getPromise({ ...options... }),
    datacontext.entity11.getPromise({ ...options... }),                    
    )
})
.then(function() {
    // do work with the results
});

如果我可以建议:

1. 使用真正的 Promise 实现，jQuery 延迟对象非常有限。
2. 使用返回值而不是使用全局/闭包变量从 Promise 传递数据。