😽

JavaScript fetchのawaitとthenについて

2025/01/19に公開

はじめに

JavaScriptで fetch を使ってデータを取得する際には、await.then/.catchのどちらかを使うことができます。どちらを使うべきかよくわからなかったので、ChatGPTにきいてみました。

一般的な傾向

await の使用が増えている

  • コードが読みやすい: 非同期処理が同期的に書けるため、直感的に理解しやすいです。
  • モダンなJavaScriptでの標準: ES2017で導入されて以来、新規プロジェクトやモダンなコードベースで広く使用されています。
  • エラーハンドリングが統一しやすい: try/catchブロックでエラーを簡潔に処理できます。

.then の使用も依然として存在

  • レガシーコードとの互換性: 古いコードベースでは.thenが使われていることが多いです。
  • 簡易な非同期処理に適している: 単純な処理では.thenが冗長にならず、十分機能します。
  • チェーン処理: 複数の非同期処理を直列で処理する際に使われることがあります。

実際の利用割合

  • 新規プロジェクトではawaitが主流となっています。特にモダンな開発スタイルを採用しているチームでは、コードの読みやすさが重視されます。
  • 既存コードベースでは、.thenが多く使われているケースもあります。既存のコードを部分的に更新する場合、.thenawaitが混在することもあります。
  • チームのスタイルガイドに従うケースも多く、特定の方法が推奨されることがあります。

どちらを使うべきか?

await を使う場合

以下の場合はawaitを使うのが良いでしょう。

  • コードの見通しを良くしたいとき。
  • 他の同期的な処理と一貫した書き方をしたいとき。
  • エラーハンドリングを統一してシンプルにしたいとき。

.then を使う場合

以下のような場合には.thenが適しています。

  • 非同期処理が単純である場合(例: 短いチェーンで十分)。
  • 既存のコードベースやスタイルガイドが.thenを推奨している場合。
  • 特定のツールやライブラリで.thenが求められる場合。

実装例

await を使用した例

以下は、awaitを使用してエラーハンドリングを含めたコード例です。

async function main() {
    try {
        const response = await fetch('/api/hello');
        if (!response.ok) {
            throw new Error(`HTTPエラー: ${response.status}`);
        }
        const responseBody = await response.json();
        document.getElementById('message').innerText = responseBody.message;
    } catch (error) {
        console.error('エラーが発生しました:', error);
        document.getElementById('message').innerText = 'エラーが発生しました。';
    }
}

.then/.catch を使用した例

以下は、.then/.catchを使用した場合のコード例です。

function main() {
    fetch('/api/hello')
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTPエラー: ${response.status}`);
            }
            return response.json();
        })
        .then(responseBody => {
            document.getElementById('message').innerText = responseBody.message;
        })
        .catch(error => {
            console.error('エラーが発生しました:', error);
            document.getElementById('message').innerText = 'エラーが発生しました。';
        });
}

まとめ

それぞれのスタイルには長所と短所がわかりました。テストなどで簡単に書きたい場合は.then/.catchを使用し、プロジェクトではawaitを書くようにしていきたいです。

Discussion