Cómo manejar múltiples esperas en la función asíncrona

Tengo que realizar varias llamadas a la API que se obtienen a través de una API, escriben datos en la base de datos a través de la API, envían resultados al front-end a través de otra API.

He escrito la función asincrónica con esperar como a continuación:

Los primeros 2 deben ejecutarse uno tras otro, pero el tercero puede ejecutarse independientemente y no es necesario esperar a que se completen las primeras 2 declaraciones de captación.

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();

¿Cuál es la mejor manera de manejar tales declaraciones de búsqueda múltiple?

Hay muchas formas, pero la más universal es ajustar cada ruta de código asíncrono en una función asíncrona. Esto le brinda flexibilidad de mezclar y combinar valores de retorno asíncronos como desee. En su ejemplo, incluso puede codificar en línea con async iife's:

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();
  })()
]);

Puede usar .then(), en lugar de esperar:

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 más fácil si trabaja con "creadores" de promesas (= función que devuelve promesas) en lugar de promesas en bruto. Primero, defina:

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

que devuelve tal "creador". Ahora, aquí hay dos utilidades para el encadenamiento en serie y paralelo, que aceptan tanto promesas en bruto como "creadores":

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;
}

Entonces, el código principal se puede escribir así:

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

Si no le gusta el contenedor "creador" dedicado, puede definir fetchJsonnormalmente

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

y use continuaciones en línea justo donde serieso parallelse llaman:

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

Para llevar la idea más allá, podemos hacer seriesy paralleldevolver "creadores", así como promesas. De esta manera, podemos construir "circuitos" anidados arbitrarios de promesas en serie y paralelas y obtener los resultados en orden. Ejemplo de trabajo completo:

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; }

Ejecute una solicitud independiente ( writeToDB) al principio y sinawait

let writeToDB = fetch(url_for_writeToDB);

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

// ...