JavaScriptで非同期処理を行う際、fetchを使って外部からデータを取得することがよくあります。しかし、fetchの戻り値を取得してから次の処理を実行したい場合、どうすればよいのでしょうか？この記事では、非同期処理をうまく制御し、次の処理を適切に実行するための方法を解説します。
1. 非同期処理とawaitの使い方
JavaScriptの非同期処理は、Promiseを使って実行されます。fetchはPromiseを返すので、awaitを使ってその処理が完了するのを待つことができます。例えば、以下のように書くことができます。
let htm;
async function get_data() {
const res = await fetch(hoge);
htm = await res.json();
console.log(htm); // 正常に値が表示される
}
get_data();上記のコードでは、fetchを使って非同期にデータを取得し、awaitでその結果を待ってから処理を続行します。
2. 非同期処理の順序制御
非同期処理の制御には、awaitを使うことで、fetchが完了してから次の処理が行われるようにすることができます。しかし、問題が発生する場合もあります。例えば、変数htmを非同期処理の後で使用しようとした場合、非同期処理が完了する前にhtmを参照しようとすると、undefinedが返されることになります。
これを防ぐためには、必ずawaitでfetch処理を待機し、その後でhtmを使って処理を行う必要があります。
3. コードの可読性と非同期処理の分離
質問者が懸念していたように、1000行を超えるメインの処理に非同期のfetchを埋め込むのは、可読性が悪くなります。これを改善するためには、非同期処理を別の関数として切り出し、処理を分離することが有効です。
例えば、非同期処理を独立した関数として定義し、メインのロジックとは別に管理することで、可読性が向上します。以下はその一例です。
async function fetchData() {
const res = await fetch(hoge);
return await res.json();
}
async function main() {
const htm = await fetchData();
console.log(htm);
// htmを使った次の処理
}
main();4. Promise.allを使って複数の非同期処理を並列で実行
もし複数のfetch処理を並列で実行したい場合、Promise.allを使うことで、複数の非同期処理がすべて完了するのを待ってから処理を実行できます。以下のコードのように書くことができます。
async function fetchMultipleData() {
const [data1, data2] = await Promise.all([
fetch(hoge1).then(res => res.json()),
fetch(hoge2).then(res => res.json())
]);
console.log(data1, data2);
}
fetchMultipleData();この方法を使うことで、複数の非同期処理を同時に実行し、その後で結果をまとめて扱うことができます。
5. まとめ
非同期処理の制御はJavaScriptでの重要なスキルです。fetchを使ったデータ取得後の処理を適切に順序立てて実行するためには、awaitを使って処理を待機し、その後に次の処理を行うことが基本です。また、可読性を維持するためには、非同期処理を別の関数として分離し、メインのロジックと切り離すことが有効です。これらの方法を使うことで、より効率的で理解しやすいコードを書くことができます。
コメント