Angular / TypeScript - 在另一个函数完成后调用一个函数答案

【问题标题】：Angular / TypeScript - Call a function after another one has been completedAngular / TypeScript - 在另一个函数完成后调用一个函数
【发布时间】：2018-07-10 08:45:59
【问题描述】：

我想在f1 完成后致电f2。 f1 函数可以是同步或异步。我需要一个适用于这两种情况的示例。我找到了一个解决方案，使用 Promise 和计时器：

global() {
    this.f1().then(res => {
        this.f2()
    })
}

f1() {
    return new Promise<any>((resolve, reject) => {

        // Some code...

        setTimeout( () => {
            resolve(x);
        }, 1500);
    });
}

f2() {
    // Some code...
}

问题是程序总是要等待1500ms。我不想在f1 完成之前开始f2。有没有办法等待所需的时间，而不是更多或更少？

【问题讨论】：

f2(); f1();怎么样
为什么要等待 1500 毫秒才能运行 f2？如果在将来的任何时候为完成f1 检索数据需要更长的时间，您的代码就会中断。
您需要扩展您的问题以说明f1 中还发生了什么，如果它只是您超时的代码，那么您可以安全地删除它。如果是检索远程数据的调用，那么该调用将返回一个承诺，因此这是您必须从f1 返回的承诺，然后f2 将在数据返回后立即运行。

标签： angular typescript asynchronous promise synchronous

【解决方案1】：

所以删除setTimeout 部分。它将调用resolve 或reject，然后将执行传递给下一个then 或catch 处理程序。如果 Promise 中有异步调用，则需要在调用结果中调用 resolve/reject。

不等待1500ms 怎么样 - 给定时间实际上是可以调用函数的最低时间。可能在2000ms之后，这和JS代码工作的主线程有关。如果主线程没有工作要做，那么异步调用的结果就会被执行。

function f1() {
    return new Promise((resolve, reject) => {
        console.log('f1');
        resolve();
    });
}

function f2() {
   console.log('f2');
}

f1().then(res => f2());

【讨论】：

我们可以用同样的方式来调用 Angular 中的事件吗？

【解决方案2】：

如果f1是同步的，则没有什么特别的：

global() {
    f1();
    f2();
}

如果f1是异步并返回一个Observable，请使用Rxjs operator，如concatMap：

global() {
    f1().concatMap(() => f2());
}

如果f1是异步并返回一个Promise，使用async/await：

async global() {
    await f1();
    f2();
}

如果f1 是异步并返回一个Promise（替代）：

global() {
    f1().then(res => f2());
}

【讨论】：

【解决方案3】：

只要去掉超时

function f1() {
    return new Promise((resolve, reject) => {
        console.log('i am first');
        resolve();
    });
}

function f2() {
    console.log('i am second');
}

f1().then(f2);

【讨论】：

如果您使用 Observables，请先使用 switchMap 发出请求，然后再发出另一个请求，如果您并行发出请求，则使用 forkJoin