😽
JavaScript fetchのawaitとthenについて
はじめに
JavaScriptで fetch を使ってデータを取得する際には、await
と.then
/.catch
のどちらかを使うことができます。どちらを使うべきかよくわからなかったので、ChatGPTにきいてみました。
一般的な傾向
await の使用が増えている
- コードが読みやすい: 非同期処理が同期的に書けるため、直感的に理解しやすいです。
- モダンなJavaScriptでの標準: ES2017で導入されて以来、新規プロジェクトやモダンなコードベースで広く使用されています。
-
エラーハンドリングが統一しやすい:
try/catch
ブロックでエラーを簡潔に処理できます。
.then の使用も依然として存在
-
レガシーコードとの互換性: 古いコードベースでは
.then
が使われていることが多いです。 -
簡易な非同期処理に適している: 単純な処理では
.then
が冗長にならず、十分機能します。 - チェーン処理: 複数の非同期処理を直列で処理する際に使われることがあります。
実際の利用割合
-
新規プロジェクトでは
await
が主流となっています。特にモダンな開発スタイルを採用しているチームでは、コードの読みやすさが重視されます。 -
既存コードベースでは、
.then
が多く使われているケースもあります。既存のコードを部分的に更新する場合、.then
とawait
が混在することもあります。 - チームのスタイルガイドに従うケースも多く、特定の方法が推奨されることがあります。
どちらを使うべきか?
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