javascript - 顺序运行 promise 数组

Question

我正在尝试创建一个承诺列表，然后一个接一个地运行它们。基本上我需要展示一系列模态，
收集信息并解决。

这是我的代码：

const tasks = self.createInputTasks(data);
tasks.reduce((promiseChain, currentTask) => {
    return promiseChain.then(chainResults =>
        currentTask.then(currentResult => {
            console.log("INPUT RESULT");
            console.log(currentResult);
            return [...chainResults, currentResult]
        }));
}, Promise.resolve([]))

和 createInputTasks方法：

createInputTasks(data) {
    const tasks = [];
    _.each(data, function (info, input) {
        tasks.push(new Promise(
            function (resolve, reject) {
                // Do some work
                showInputDialog(info,function (enteredText) {
                        console.log("Entered info");
                        console.log(enteredText);
                        resolve(enteredText);
                    }, function () {
                        reject("No info entered");
                }]);
            }));
    });
    console.log(tasks);
    return tasks;
}

但是，当我运行它时，它在调用 reduce...之前显示了多个模态事件。我的代码有什么问题？

我需要一个接一个地展示每个模态。

Answer 1

您错过了重要的一点，executor函数由Promise实现立即执行。
因此，当您将诺言推送到数组时，它们已经被执行。乍一看这似乎很奇怪，但这是规范。

为了顺序运行任务并依次显示模态，您可能不返回构造的promise，而是返回了promise的函数：

createInputTasks(data) {
    const tasks = [];
    _.each(data, function (info, input) {
        tasks.push(() => new Promise(
            function (resolve, reject) {
                // Do some work
                showInputDialog(info,function (enteredText) {
                        console.log("Entered info");
                        console.log(enteredText);
                        resolve(enteredText);
                    }, function () {
                        reject("No info entered");
                }]);
            }));
    });
    console.log(tasks);
    return tasks;
}

结果，在创建任务数组时将无法构建promise。
最后，您需要对reduce逻辑进行一些修改：

const tasks = self.createInputTasks(data);
tasks.reduce((promiseChain, currentTask) => {
    return promiseChain.then(chainResults =>
        currentTask().then(currentResult => {
            console.log("INPUT RESULT");
            console.log(currentResult);
            return [...chainResults, currentResult]
        }));
}, Promise.resolve([]))

我们正在调用 currentTask，因为这是一个返回Promise的函数。

在这种情况下，您应该获得所需的行为。

希望对您有所帮助。