複数APIへのリクエストをfetch関数で同時実行するプラクティス
はじめに
JavaScriptでfetch関数を使用して、複数のAPIへのリクエストを同時に実行する際のベストプラクティスを探求していく。
今回は以下の２種類の方法を模索する。
- Promiseオブジェクトで実行
- fetch関数のコールバッグのthenメソッド内で次のAPIへのfetch関数で順次実行
Promiseオブジェクトで実行
最初はfetch関数の戻り値をPromiseオブジェクトに設定し、実行する方法。
var resultList = [];
let processA = fetch('https://wwww.aaa.com/bbb');
let processB = fetch('https://wwww.ccc.com/ddd');
Promise.all([processA, processB])
.then((response) => {return response.json();})
.then((data) => {
resultList[] = data;
})
.catch(alert);
この方法は、各APIの実行結果が互いの実行結果に干渉しない場合に有効である。
fetchで値を取得するだけなら、この方法で充分である。
fetch関数のコールバッグのthenメソッド内で次のAPIへのfetch関数を順次実行
次にfetch関数のコールバッグのthenメソッド内で次のAPIへのfetch関数を順次実行する方法。
fetch('https://wwww.aaa.com/bbb')
.then((response) => {return response.json();})
.then((data) => {
return fetch('https://wwww.ccc.com/ddd', data);
})
.then((response) => {return response.json();})
.then((data) => {
// 次の処理
})
.catch(alert);
この方法は最初のAPIの実行結果を次に実行するAPIのリクエストパラメータに指定する場合に有効な方法である。
Rest APIの概念では、各APIの実行結果は干渉せず、独立した内容であるべきである。
しかし実際には、トランザクション処理の都合上、順次実行が必要なケースもあるだろう。
そういったケースにはこちらのやり方の方がスマートだろう。
最後に
SPAやPWA等でもAPIの実行によるマイクロサービス化が流行する昨今で、今回のように複数のAPIを同時実行するケースは多々あるだろう。
今回の記事が問題の解決に役に立てば幸いである。