Question

我尝试使用原生ES6 promises进行异步循环种类有效，但不正确。我想我在某个地方犯了一个大错，我需要有人告诉我它在哪里以及它是如何正确完成的

var i = 0;

//creates sample resolver
function payloadGenerator(){
    return function(resolve) {
        setTimeout(function(){
            i++;
            resolve();
        }, 300)
    }
}

// creates resolver that fulfills the promise if condition is false, otherwise rejects the promise.
// Used only for routing purpose
function controller(condition){
    return function(resolve, reject) {
        console.log('i =', i);
        condition ? reject('fin') : resolve();
    }
}

// creates resolver that ties payload and controller together
// When controller rejects its promise, main fulfills its thus exiting the loop
function main(){
    return function(resolve, reject) {
        return new Promise(payloadGenerator())
            .then(function(){
                return new Promise(controller(i>6))
            })
            .then(main(),function (err) {
                console.log(err);
                resolve(err)
            })
            .catch(function (err) {
                console.log(err , 'caught');
                resolve(err)
            })
    }
}


new Promise(main())
    .catch(function(err){
        console.log('caught', err);
    })
    .then(function(){
        console.log('exit');
        process.exit()
    });

现在输出：

/usr/local/bin/iojs test.js
i = 1
i = 2
i = 3
i = 4
i = 5
i = 6
i = 7
fin
error: [TypeError: undefined is not a function]
error: [TypeError: undefined is not a function]
error: [TypeError: undefined is not a function]
error: [TypeError: undefined is not a function]
error: [TypeError: undefined is not a function]
error: [TypeError: undefined is not a function]
error: [TypeError: undefined is not a function]
caught [TypeError: undefined is not a function]
exit

Process finished with exit code 0

好的部分：它到达终点。

不好的部分：它发现了一些错误，我不知道为什么。

Answer 1

任何带有promise循环的辅助函数我已经看到实际上比使用递归开箱即可做的更糟糕。

.thenReturn有点好，但是：

function readFile(index) {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Read file number " + (index +1));
            resolve();
        }, 500);
    });
}

// The loop initialization
Promise.resolve(0).then(function loop(i) {
    // The loop check
    if (i < len) {              // The post iteration increment
        return readFile(i).thenReturn(i + 1).then(loop);
    }
}).then(function() {
    console.log("done");
}).catch(function(e) {
    console.log("error", e);
});

在jsfiddle http://jsfiddle.net/fd1wc1ra/

中查看

这几乎完全等同于：

try {
    for (var i = 0; i < len; ++i) {
        readFile(i);
    }
    console.log("done");
} catch (e) {
    console.log("error", e);
}

如果你想做嵌套循环，那就完全一样了：

http://jsfiddle.net/fd1wc1ra/1/

function printItem(item) {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Item " + item);
            resolve();
        }, 500);
    });
}

var mdArray = [[1,2], [3,4], [5,6]];
Promise.resolve(0).then(function loop(i) {
    if (i < mdArray.length) {
        var array = mdArray[i];
        return Promise.resolve(0).then(function innerLoop(j) {
            if (j < array.length) {
                var item = array[j];
                return printItem(item).thenReturn(j + 1).then(innerLoop);
            }
        }).thenReturn(i + 1).then(loop);
    }
}).then(function() {
    console.log("done");
}).catch(function(e) {
    console.log("error", e);
});

Answer 2

如果你所做的一切都是用承诺计算到7，那么这样就可以了：

function f(p, i) {
  return p.then(function() {
    return new Promise(function(r) { return setTimeout(r, 300); });
  })
  .then(function() { console.log(i); });
}

var p = Promise.resolve();
for (var i = 0; i < 8; i++) {
  p = f(p, i);
}
p.then(function() { console.log('fin'); })
 .catch(function(e) { console.log(e.message); });

承诺承诺很难，因为几乎不可能不进入JavaScript的closures in a loop trap，但它是可行的。上面的工作是因为它将.then（）的所有用法推送到循环的子函数f中（即远离循环）。

我使用的一个更安全的解决方案是完全放弃循环并尽可能地寻找像forEach和reduce这样的模式，因为它们会有效地强制子函数：

[0,1,2,3,4,5,6,7].reduce(f, Promise.resolve())
.then(function() { console.log('fin'); })
.catch(function(e) { console.log(e.message); });

此处f与上述功能相同。 Try it

更新： In ES6您还可以使用for (let i = 0; i < 8; i++)来避免循环中的＆＃34;关闭＆＃34;陷阱而不将代码推送到子函数f。

PS：您示例中的错误是.then(main(), - 它必须是.then(function() { return new Promise(main()); },但实际上，我认为您正在使用错误的模式。 main()应该返回一个承诺，而不是一个承诺。

Answer 3

在捕获承诺错误时，请尝试记录err.stack而不是err。

在这种情况下，看起来resolve和reject未在匿名函数中定义，该函数在初始迭代完成后从main返回。我不能完全遵循你的控制流程，但这似乎是有道理的 - 在7次迭代完成后，不再有任何新的承诺。但是，似乎代码仍在尝试运行，因为有更多的承诺需要解决。

编辑：这是问题.then(main(),function (err) {。单独调用main将导致匿名函数中的resolve和reject未定义。从我阅读它的方式来看，main只能作为Promise构造函数的参数调用。

Answer 4

我也四处寻找各种解决方案，找不到让我满意的人，所以我最终创造了自己的解决方案。这是为了防止对其他人有用：

这个想法是创建一个promise数组的数组，并将这个数组赋予一个将要一个接一个地执行promise的辅助函数。

在我的情况下，辅助函数就是这样：

function promiseChain(chain) {
    let output = new Promise((resolve, reject) => { resolve(); });
    for (let i = 0; i < chain.length; i++) {
        let f = chain[i];
        output = output.then(f);
    }
    return output;
}

然后，例如，要一个接一个地加载多个URL，代码将是这样的：

// First build the array of promise generators:

let urls = [......];
let chain = [];
for (let i = 0; i < urls.length; i++) {
    chain.push(() => {
        return fetch(urls[i]);
    });
}

// Then execute the promises one after another:

promiseChain(chain).then(() => {
    console.info('All done');
});

这种方法的优点是它创建的代码与常规for循环相对接近，并且压痕最小。

Answer 5

我有类似的需求并尝试了接受的答案，但我的操作顺序有问题。 Promise.all是解决方案。

function work(context) {
  return new Promise((resolve, reject) => {
    operation(context)
      .then(result => resolve(result)
      .catch(err => reject(err));
  });
}

Promise
  .all(arrayOfContext.map(context => work(context)))
  .then(results => console.log(results))
  .catch(err => console.error(err));

循环与本机承诺;

5 个答案: