非同期関数で複数の待機を処理する方法

APIを介してフェッチし、APIを介してDBにデータを書き込み、別のAPIを介してフロントエンドに出力を送信する複数のAPI呼び出しを行う必要があります。

以下のようにawaitを使用して非同期関数を作成しました-

最初の2つは次々に実行する必要がありますが、3つ目は独立して実行でき、最初の2つのフェッチステートメントが完了するのを待つ必要はありません。

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

そのような複数のフェッチ文を処理する最良の方法は何ですか？

多くの方法がありますが、最も一般的な方法は、非同期コードパスを非同期関数でラップすることです。これにより、非同期の戻り値を自由に組み合わせて組み合わせることができます。あなたの例では、非同期iifeを使用してコードをインライン化することもできます。

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

.then()待つのではなく、を使用できます。

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

生のプロミスではなく、プロミスの「作成者」（=プロミスを返す関数）を使用する方が簡単です。まず、次を定義します。

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

そのような「創造者」を返します。ここで、直列および並列チェーン用の2つのユーティリティを示します。これらは、生のプロミスと「作成者」の両方を受け入れます。

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

次に、メインコードは次のように書くことができます：

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

専用の「クリエーター」ラッパーが気に入らない場合は、次のように定義できます。 fetchJson通常どおり

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

インライン継続を適切な場所で使用するseriesか、parallel呼び出される：

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

アイデアをさらに進めるために、約束ではなく「作成者」を作成seriesしてparallel返すことができます。このようにして、シリアルおよびパラレルプロミスの任意のネストされた「回路」を構築し、順番に結果を取得できます。完全な動作例：

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

writeToDB最初に独立したリクエスト（）を実行します。await

let writeToDB = fetch(url_for_writeToDB);

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

// ...