[備忘録].then チェーンを使って、JavaScriptの実行順序を制御する

はじめに

JavaScriptで非同期処理を扱う際、正しい実行順序を保証することは重要です。今回は、私が遭遇した一般的な問題と、.then() チェーンを用いた解決策について共有します。

問題点

画像を非同期にロードし、そのロードが完了次第表示する必要がありました。しかし、画像を取得するgetImages関数が完了する前に、画像を表示しようとするdisplayShape関数が実行されてしまいました。これは、getImages関数がfetch APIを使用しており、非同期でデータを取得するためです。

// これは問題を示す疑似コードです
function getImages() {
  fetch("/get-images").then(response => {
    // 画像データの処理
  });
}

function displayShape() {
  // 画像の表示
}

getImages();
displayShape(); // これはgetImagesが完了する前に実行されるかもしれません

.then() チェーンによる解決策

.then() チェーンを使って、getImages関数内で画像データが正常に取得された後にdisplayShape関数を呼び出すようにしました。これにより、displayShapeが実行される時には画像データが確実に利用可能であることを保証できます。

function getImages() {
  return fetch("/get-images").then(response => response.json());
}

function displayShape(shape) {
  // 画像の表示
}

getImages().then(displayShape);

まとめ

.then() チェーンを利用することで、非同期処理の完了後に特定の処理を順序正しく実行することが可能になります。これは、JavaScriptの非同期処理を扱う上で非常に重要なパターンです。