I would like to call f2
after f1
has been completed. f1
function can be synchronous or asynchronous. I need an example that work in both cases. I have found a solution, using a Promise
and a timer:
global() {
this.f1().then(res => {
this.f2()
})
}
f1() {
return new Promise<any>((resolve, reject) => {
// Some code...
setTimeout( () => {
resolve(x);
}, 1500);
});
}
f2() {
// Some code...
}
The problem is the program always have to wait 1500ms. I don't want f2
start before f1
is finished.
Is there a way to wait the time needed, not more or less?
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());
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());
}
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);