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

Posted 2023-03-13

【中文标题】Angular / TypeScript - 在另一个函数完成后调用一个函数

【英文标题】：Angular / TypeScript - Call a function after another one has been completed

【发布时间】：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 将在数据返回后立即运行。

【参考方案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