Angular/TypeScript - Kall en funksjon etter at en annen er fullført

Jeg vil gjerne kalle f2 etter at f1 har blitt fullført. f1-funksjonen kan være synkron eller asynkron. Jeg trenger et eksempel som fungerer i begge tilfeller. Jeg har funnet en løsning, ved å bruke en Promise og en timer:

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

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

        // Some code...

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

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

Problemet er at programmet alltid må vente 1500ms. Jeg vil ikke at f2 skal starte før f1 er ferdig. Finnes det en måte å vente nøyaktig den tiden som trengs, ikke mer eller mindre?

Svar #1

Så fjern setTimeout-delen. Den vil kalle resolve eller reject og deretter sende utførelsen videre til neste then eller catch-håndterer. Hvis du har et asynkront kall i Promise, må du kalle resolve/reject i resultatet av det kallet.

Hva med å ikke vente 1500ms - den angitte tiden er faktisk den laveste tiden etter hvilken funksjonen kan kalles. Kanskje etter 2000ms. Dette er relatert til hovedtråden der JS-koden kjører. Hvis hovedtråden ikke har noe arbeid å gjøre, vil resultatene av de asynkrone kallene bli utført.

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

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

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

Svar #2

Hvis f1 er synkron, er det ingenting spesielt å gjøre:

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

Hvis f1 er asynkron og returnerer en Observable, bruk Rxjs-operator, som concatMap:

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

Hvis f1 er asynkron og returnerer et Promise, bruk async/await:

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

Hvis f1 er asynkron og returnerer et Promise (alternativ):

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

Relaterte artikler