javascript - Promise.all 似乎立即解决

标签 javascript jquery promise

我发布了一个similar question related to Ember.RSVP.all ,但我发现其行为与 Promise.all 的行为相同。如果我通过单独提交违反了任何规则,请告诉我。

我正在尝试在 promise 链的中间使用 Promise.all。我的示例比我的使用简单得多,但它演示了这个问题。在 promise 链的中间,我有一组 promise,在链可以继续之前,所有这些都需要解决 - 这正是我所理解的 Promise.all 的用途。

不幸的是,当我返回 Promise.all 对象时,链中的下一个 promise 会立即运行,而无需等待传递给 all() 的 promise 。

我已经设置了一个 js fiddle 来以我能想到的最佳方式进行演示:

请注意,First 和 Second 几乎同时解析,Second 应该在 1s promise 返回之后。第三和第四如预期。

http://jsfiddle.net/vqut9zy2/

fiddle 代码如下所示:

function delayAjax(delay) {
    return $.ajax({
        url: '/echo/json/',
        data: {
            json: '',
            delay: delay,
        }
    });
}

delayAjax(1).then(function() {
    $('#first').addClass('red');
    var proms = [delayAjax(1), delayAjax(1)];
    return Promise.all(proms).then(function() {
        $('#onepointfive').addClass('red');
    });
}).then(function() {
    $('#second').addClass('red');
    return delayAjax(1);
}).then(function() {
    $('#third').addClass('red');
    return delayAjax(1);
}).then(function() {
    $('#fourth').addClass('red');
});

HTML

<div id="first">First</div>
<div id="onepointfive">One point five</div>
<div id="second">Second</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>

最佳答案

您需要先将 jQuery 的 deferred 转换为 promise。

function delayAjax(delay) {
    return Promise.resolve($.ajax({
        url: '/echo/json/',
        data: {
            json: '',
            delay: delay,
        }
    }));
}

http://jsfiddle.net/evilbuck/vqut9zy2/3/

关于javascript - Promise.all 似乎立即解决,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27429508/

相关文章:

javascript - 如何自动向下滚动聊天框 (div)?

node.js - 如何优化 Promise 以避免回调/Promise hell

javascript - 在 html anchor 标记 href 元素中添加一些 javascript

javascript - 哪个 MEAN 生成器 - javascript

javascript - 根据输入值增量更改按钮颜色

node.js - Node 串行端口堆叠监听器并且未使用 promise 获得完整响应

javascript - 链式 jQuery promises with abort

javascript - 在 gulp-inject 中包含 CDN 源

javascript - CSS :hover and active conflits - a specific case

javascript - 如何在 JQuery UI Draggable 元素的启动事件处理程序期间使 css 位置更改生效?