Angular / TypeScript - Call a function after another one has been completed

Question

I would like to call f2 after f1 has been completed. f1 function can be synchronous or asynchronous.

Answer 1

If f1 is synchronous, there is nothing special to do:

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

If f1 is asynchronous and return an Observable, use Rxjs operator, like concatMap:

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

If f1 is asynchronous and return a Promise, use async/await:

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

If f1 is asynchronous and return a Promise (alternative):

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

Answer 2

So remove the setTimeout part. It will call resolve or reject and then pass the execution to the next then or catch handler. If you have some asynchronous call in the Promise, you need to call resolve/reject in the result of that call.

What about not waiting 1500ms - the given time is actually the lowest time after which the function may be called. Maybe after 2000ms This is related to the main thread in which JS code works. If main thread has no work to done, then the results of the asynchronous calls are going to be executed.

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

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

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

Answer 3

Just remove the timeout

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

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

f1().then(f2);