Umgang mit mehreren Wartezeiten in der asynchronen Funktion

Ich muss mehrere API-Aufrufe durchführen, die über eine API abgerufen, Daten über die API in die Datenbank geschrieben und die Ausgabe über eine andere API an das Front-End gesendet werden.

Ich habe eine asynchrone Funktion mit Warten wie unten geschrieben -

Die ersten beiden sollten nacheinander ausgeführt werden, die dritte kann jedoch unabhängig voneinander ausgeführt werden, ohne dass Sie warten müssen, bis die ersten beiden Abrufanweisungen abgeschlossen sind.

let getToken= await fetch(url_for_getToken);
let getTokenData = await getToken.json();

let writeToDB = await fetch(url_for_writeToDB);
let writeToDBData = await writeToDB.json();

let frontEnd = await fetch(url_for_frontEnd);
let frontEndData = await frontEnd.json();

Was ist der beste Weg, um mit solchen Mehrfachabrufanweisungen umzugehen?

Es gibt viele Möglichkeiten, aber die universellste besteht darin, jeden asynchronen Codepfad in eine asynchrone Funktion zu verpacken. Dies gibt Ihnen die Flexibilität, asynchrone Rückgabewerte nach Belieben zu mischen und abzugleichen. In Ihrem Beispiel können Sie sogar Code mit asynchronem iife einbinden:

await Promise.all([
  (async() => {
    let getToken = await fetch(url_for_getToken);
    let getTokenData = await getToken.json();

    let writeToDB = await fetch(url_for_writeToDB);
    let writeToDBData = await writeToDB.json();
  })(),
  (async() => {
    let frontEnd = await fetch(url_for_frontEnd);
    let frontEndData = await frontEnd.json();
  })()
]);

Sie können verwenden .then(), anstatt zu warten:

fetch(url_for_getToken)
  .then(getToken => getToken.json())
  .then(async getTokenData => {
    let writeToDB = await fetch(url_for_writeToDB);
    let writeToDBData = await writeToDB.json();
    // Carry on
  })

fetch(url_for_frontEnd)
  .then(frontEnd => frontEnd.json())
  .then(frontEndData => {
    // Carry on  
  })

Es ist einfacher, mit vielversprechenden "Schöpfern" (= Funktion, die Versprechen zurückgibt) zu arbeiten, als mit rohen Versprechen. Definieren Sie zunächst:

const fetchJson = (url, opts) => () => fetch(url, opts).then(r => r.json())

was einen solchen "Schöpfer" zurückgibt. Hier sind zwei Dienstprogramme für die serielle und parallele Verkettung, die sowohl rohe Versprechen als auch "Schöpfer" akzeptieren:

const call = f => typeof f === 'function' ? f() : f;

const parallel = (...fns)  => Promise.all(fns.map(call));

async function series(...fns) {
    let res = [];

    for (let f of fns)
        res.push(await call(f));

    return res;
}

Dann kann der Hauptcode folgendermaßen geschrieben werden:

let [[getTokenData, writeToDBData], frontEndData] = await parallel(
    series(
        fetchJson(url_for_getToken),
        fetchJson(url_for_writeToDB),
    ),
    fetchJson(url_for_frontEnd),
)

Wenn Ihnen der dedizierte "Creator" -Wrapper nicht gefällt, können Sie ihn fetchJsonnormal definieren

const fetchJson = (url, opts) => fetch(url, opts).then(r => r.json())

und verwenden Sie Inline-Fortsetzungen genau dort, wo seriesoder parallelaufgerufen werden:

let [[getTokenData, writeToDBData], frontEndData] = await parallel(
    series(
        () => fetchJson('getToken'),
        () => fetchJson('writeToDB'),
    ),
    () => fetchJson('frontEnd'), // continuation not necessary, but looks nicer
)

Um die Idee weiter voranzutreiben, können wir auch "Schöpfer" machen seriesund parallelzurückgeben, anstatt Versprechen. Auf diese Weise können wir beliebig verschachtelte "Schaltkreise" aus seriellen und parallelen Versprechungen erstellen und die Ergebnisse in der richtigen Reihenfolge erhalten. Vollständiges Arbeitsbeispiel:

const call = f => typeof f === 'function' ? f() : f;

const parallel = (...fns)  => () => Promise.all(fns.map(call));

const series = (...fns) => async () => {
    let res = [];

    for (let f of fns)
        res.push(await call(f));

    return res;
};

//

const request = (x, time) => () => new Promise(resolve => {
    console.log('start', x);
    setTimeout(() => {
        console.log('end', x)
        resolve(x)
    }, time)
});

async function main() {
    let chain = series(
        parallel(
            series(
                request('A1', 500),
                request('A2', 200),
            ),
            series(
                request('B1', 900),
                request('B2', 400),
                request('B3', 400),
            ),
        ),
        parallel(
            request('C1', 800),
            series(
                request('C2', 100),
                request('C3', 100),
            )
        ),
    );

    let results = await chain();

    console.log(JSON.stringify(results))
}

main()

.as-console-wrapper { max-height: 100% !important; top: 0; }

Führen Sie writeToDBzu Beginn und ohne unabhängige Anfrage ( ) ausawait

let writeToDB = fetch(url_for_writeToDB);

let getToken = await fetch(url_for_getToken);
let getTokenData = await getToken.json();

// ...