😸

JavaScriptに出てくる「.then」ってなんだっけ？

2024/06/01に公開

JavaScript

fetch

tech

.then

簡単にいうとJavaScriptで非同期処理を扱う際に使う表現でpromiseという仕組みに関連します。
巷でよく聞くAPIとはまさにこの非同期処理の取ってくる対象として扱われます。
promiseは「将来的に起こる結果を返す」ことを約束する仕組みです。
と、言われても頭に「？」が浮かぶと思います。
例えばネットワークを通じて東京の天気予報を取得するとします。
その天気予報の情報が返ってくるまで多少の時間がかかるので、その間に他の処理をしてしまおう！それを「非同期処理」と言います。
タイトルに戻りますが、.thenを使うと何がいいかというとpromiseが「完了したら、次は〜の処理をする」といった記述が可能になります。
説明だけだと分かりづらいと思うので簡単にコードにします。

// 天気予報データを取得するためのPromiseを作成
function fetchWeather(location) {
  return new Promise((resolve, reject) => {
    fetch(`https://api.example.com/weather?location=${location}`)
      .then((response) => {
        if (!response.ok) {
          throw new Error('ネットワークの応答が正常ではありません');
        }
        return response.json();
      })
      .then((data) => resolve(data))
      .catch((error) => reject(error));
  });
}

// 'Tokyo'の天気予報データを取得する
fetchWeather('Tokyo')
  .then((data) => {
    console.log('天気予報:', data);
  })
  .catch((error) => {
    console.error('データの取得に失敗しました:', error);
  });

上から簡単に説明します。

fetchWeather関数を定義し、指定された天気予報を取得するpromiseを返します。
新しいPromiseを作成し、その中でfetchを使ってデータを取得します。
その後、location変数を使って場所を指定します。
.thenでサーバーからの応答を受け取った後の処理を指示します。
JSONに変換されたdataをPromiseの成功（resolve）として返します。
エラーの場合は、Promiseを失敗（reject）としてエラーを返します。
fetchWeather関数を呼び出し、東京の天気予報データを取得します。
成功の場合、取得データをコンソールに出力します。
失敗した場合は、エラーメッセージをコンソールに出力します。

と、このような形で「.then」を使用することにより「この処理が終わったら、次はこれをやってね！」と明示的に指示ができます。
コードも見やすいですよね。補足で付け加えると一般的にこういった非同期処理はエラーハンドリングが必須となります。（データが100%取得できるわけではないですからね）

まとめ

今回は簡単なコード例を交えて、「.then」の説明をしました。
「非同期処理にはfetchとかpromiseとか使って.thenもあると便利なんだ」くらいご理解いただければ幸いです。
読んでいただきありがとうございました。

.then

まとめ

Discussion