javascript - 使用 Promises 顺序加载

Question

我有一个异步调用数组，我想按顺序调用它们，这意味着我不想在第一个 promise 完成之前调用第二个 promise，依此类推。

在下面的示例中，我有一个循环，可以动态创建独特的图像并将它们附加到页面。我希望按顺序附加图像，但出于某种原因，它们不会总是按照它们创建时的确切顺序呈现:

var container = document.getElementById("container");
var promise = Promise.resolve();
for(var i = 0; i<100; i++) {
    (function(i) {
        promise = promise.then(function() {
            createPromise(container, i);
        });
    })(i);
}

function createPromise(container, i) {
    return new Promise(function(resolve,  reject) {
        var img = new Image();
        img.onload = function() {
            container.appendChild(img);
            resolve();
        };
        img.onerror = function() {
            reject();
        };
        img.src = "http://placehold.it/100x100?text=Image+" + i + "&v=" + Date.now();
    });
}

img { float: left; margin: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.27/bluebird.min.js"></script>
<div id="container"></div>

我还创建了一个 Fiddle这说明了问题。

我正在使用 bluebird，但我更愿意坚持使用原生 ES6 实现。

Answer 1

如果我是正确的，这个 block 就是导致问题的原因:

    promise = promise.then(function() {
        createPromise(container, i);
    });

createPromise 返回一个 promise ，但是在 then 中你没有返回那个 promise ，所以它会假设 return undefined;(默认为所有 js 函数)，因此后续的 promise 都不会在开始之前等待前任完成。尝试将其更改为:

    promise = promise.then(function() {
        return createPromise(container, i);
    });

var container = document.getElementById("container");
var promise = Promise.resolve();
for(var i = 0; i<100; i++) {
    (function(i) {
        promise = promise.then(function() {
            return createPromise(container, i);
        });
    })(i);
}

function createPromise(container, i) {
    return new Promise(function(resolve,  reject) {
        var img = new Image();
        img.onload = function() {
            container.appendChild(img);
            resolve();
        };
        img.onerror = function() {
            reject();
        };
        img.src = "http://placehold.it/100x100?text=Image+" + i + "&v=" + Date.now();
    });
}

img { float: left; margin: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.27/bluebird.min.js"></script>
<div id="container"></div>