如何按顺序运行 2 行 Javascript - async/promises/callbacks

Question

我需要运行两行（或更多）原版代码 javascript。

每个调用例程（也称为顶级函数，其目的是执行程序步骤而不是计算结果）。这些依次调用其他多个。

function fMasterProcedure() {
    fSubProcedure1();
    fSubProcedure2();
    ... etc
}

假设 fSubProcedure1() 的代码如下（对于此图）：

function fSubProcedure1() {
    fSubSubProcedure1_1();  // Normal
    fSubSubProcedure1_2();  // Async
    fSubSubProcedure1_3();  // Normal
    fSubSubProcedure1_4();  // Async
    fSubSubProcedure1_5();  // Normal
}

这实际上是与此处 how to run sequence functions in javascript 相同的问题，尽管那里提供的答案没有说明如何做，并且从那以后的几年里，在承诺和异步函数方面进行了语法更新。

如今，答案似乎是 promises 和 async/await... 或者只是不使用 promises 的回调？

我已经阅读了很多关于 promises 的描述和教程，包括这里。

然而，我最终得到这样的代码：

function fMasterProcedure() {
    return (new Promise(function(resolve, reject) {
        fSubProcedure1();
        setTimeout(function () {
            resolve();
        }, 0);
    })).then(function(result) {
        fSubProcedure2();
    });
}

如您所见，它不必要地增加了 400% 的行，但仍然不能可靠地工作。

有没有更有效的写法，或者更合适的写法？

（要求是运行 fSubProcedure2 在 fSubProcedure1 （及其任何子进程）完全完成后。我试图从“这不是 JS 的方式”工作”到“这里是如何使 JS 达到该要求”）。

我正在努力获得很好的理解，以便我可以将其应用到整个项目方法中 - 每个方法中都有很多示例。

Answer 1

如果 fSubProcedure1 和 fSubProcedure2 是两个异步函数，并且您想一个接一个地执行它们，那么尝试执行类似的操作：

async function fMasterProcedure() {
    await fSubProcedure1();
    await fSubProcedure2()
}
// to execute the fMasterProcedure function
fMasterProcedure().then(console.log).catch(console.error);
//replace console.log and console.error with your appropriate callbacks

示例：

// returns Promise<number>
function fSubProcedure1() {
    console.log("runs first");
    return Promise.resolve(2*2);
}
// returns void
function fSubProcedureNormal() {
    console.log("runs second");
    //returns nothing
}
// returns number which gets converted to Promise<number>
async function fSubProcedure2() { 
    console.log("runs third");
    return 2*4;
}
async function fMasterProcedure() {
    let a = await fSubProcedure1();
    fSubProcedureNormal();
    let b = await fSubProcedure2();
    return `${a} : ${b}`;
}

fMasterProcedure().then(console.log).catch(console.error);

重要的一点...你想尝试在 fMasterProcedure 中捕获每个 await

的错误

资源：

async function

async await

查看这些资源以了解更多信息

如何按顺序运行 2 行 Javascript - async/promises/callbacks

How to run 2 lines of Javascript in sequence - async/promises/callbacks

javascript

asynchronous

callback

sequential

如何按顺序 运行 2 行 Javascript - async/promises/callbacks

How to run 2 lines of Javascript in sequence - async/promises/callbacks

javascript

asynchronous

callback

sequential

如何按顺序运行 2 行 Javascript - async/promises/callbacks