调用具有更多异步函数的异步函数

Question

我在试图调用数组中的异步函数链时遇到了困难。当我单独调用该函数时，它没有出现任何问题，如下例所示：

​

function consoleAll(string) {
    return new Promise(function (resolve) {
        console1(string).then(function () {
            console2(string).then(function () {
                resolve();
            });
        });
    });
}
function console1(value) {
    return new Promise((resolve) => {
        console.log(value + "1");
        resolve()
    });
}
function console2(value) {
    return new Promise((resolve) => {
        console.log(value + "2");
        resolve()
    });
}
consoleAll('value-')

​

在这种情况下，结果是正确的：

value-1
value-2

但是，当它被传递到一个循环中时，它不会正确地执行线程，并且会调用完全不正常的函数。

​

function consoleAll(string) {
    return new Promise(function (resolve) {
        console1(string).then(function () {
            console2(string).then(function () {
                resolve();
            });
        });
    });
}
function console1(value) {
    return new Promise((resolve) => {
        console.log(value + "1");
        resolve()
    });
}
function console2(value) {
    return new Promise((resolve) => {
        console.log(value + "2");
        resolve()
    });
}

//Call
['h1-', 'h2-', 'h3-'].forEach(function (string) {
  consoleAll(string)
});

​

这次不是写下面的结果：

h1-1
h1-2
h2-1
h2-2
h3-1
h3-2

它的输出结果是：

h1-1
h2-1
h3-1
h1-2
h2-2
h3-3

看起来，它调用整个数组的console1函数，然后调用console2。

有人知道打这个电话的正确方式吗？PS。我不在乎是否有必要安装一些插件来修复这个问题。

Answer 1

在上一次异步调用完成后，您必须再次调用logAll：

const values =  ['h1-', 'h2-', 'h3-'];
(function next(i) {
   if(i >= values.length) return;
   consoleAll(values[i]).then(function() {
      next(i + 1);
   });
})(0);

或者，如果这太丑了，下面是一种更现代的方式：

(async function() {
   for(const string of ["h1-", "h2-", "h3"])
     await consoleAll(string);
})();

正如我在评论中所指出的，consoleAll更好地写成：

function consoleAll(str) {
  return console1(str).then(function() {
    return console2(str);
  });
}

或者：

async function consoleAll(str) {
  await console1(str);
  await console2(str);
}

Answer 2

如果调用new Promise(fn)，则会立即执行内部的fn。所有.then都被推送到堆栈中，以便稍后执行，但首先，整个.forEach必须传递。

在这段代码中可以看到更多信息：

​

function consoleAll(string) {
    return new Promise(function (resolve) {
        consoleLog(string, 1).then(function () {
            consoleLog(string, 2).then(function () {
                resolve();
            });
        });
        consoleLog(string, 3).then(function () {
            consoleLog(string, 4).then(function () {
                resolve();
            });
        });
    });
}
function consoleLog(value, tag) {
    return new Promise((resolve) => {
        console.log(value + tag);
        resolve()
    });
}

//Call
['h1-', 'h2-', 'h3-'].forEach(function (string) {
  consoleAll(string)
});

​

在initialition之后，其余的承诺将被执行。还请记住，resolve()不会停止函数中要执行的任何内容。它会被处死的！但是，一旦调用了诺言，承诺就会从挂起变为已解决，并且它始终会返回内部的第一个值。