非同期通信は、現代のウェブアプリケーション開発において欠かせないスキルの一つです。JavaScriptには非同期通信を行うためのいくつかの方法がありますが、今回はその中でも特に人気で使いやすいfetch APIに焦点を当てます。
fetch APIとは？
fetch APIは、JavaScriptで非同期通信を行うためのモダンな方法です。このAPIを使用すると、リモートのサーバーからデータを取得したり、データを送信したりすることができます。fetchはPromiseベースのAPIであり、非常に読みやすく、使いやすいコードを書くことができます。
基本的な使い方
fetchの基本的な構文は非常にシンプルです。
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('エラー:', error));
- fetch(url): 指定されたURLからリソースを非同期に取得します。
- .then(response => response.json()): ネットワークリクエストが成功すると、Promiseが解決され、responseオブジェクトが返されます。このresponseオブジェクトから、.json()メソッドを使ってJSONデータを取り出します。
- .then(data => console.log(data)): JSONデータが取得できたら、このデータを処理します。この例では、コンソールに出力しています。
オプションと設定
fetch APIは非常に柔軟であり、多くのオプションを設定することができます。
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('エラー:', error));
ここではHTTPメソッドをPOSTに設定し、リクエストヘッダーとしてContent-Typeをapplication/jsonに設定しています。また、bodyには送信するデータをJSON形式で指定しています。
エラーハンドリング
何らかのエラー（ネットワークエラー、非存在のURLなど）が発生した場合には、.catch()ブロックが実行されます。
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('エラー:', error));
注意点と制限
- fetchはブラウザの同一オリジンポリシーに従います。つまり、異なるオリジンへのリクエストを行う場合、そのサーバーがCORS（Cross-Origin Resource Sharing）をサポートしている必要があります。
- 旧式のブラウザではfetchがサポートされていない場合があります。その場合は、polyfillを使用するか、XMLHttpRequestを使用する必要があります。
よくある質問（FAQ）
Q. fetch APIとXMLHttpRequestの違いは何ですか？
A. fetch APIはPromiseベースでコードがシンプルになります。XMLHttpRequestはコールバック型で古いブラウザをサポートしますが記述が冗長です。現在のプロジェクトではfetch推奨です。
Q. fetchでPOSTリクエストを送るには？
A. fetch(url, {method: “POST”, headers: {“Content-Type”: “application/json”}, body: JSON.stringify(data)})のようにオプションを指定します。
Q. fetchでエラーレスポンス（4xx/5xx）を正しくキャッチするには？
A. fetchはネットワークエラー以外ではrejectしません。response.okやresponse.statusを確認し、条件が満たされない場合は手動でthrow new Error()を呼ぶ必要があります。
まとめ
fetch APIは、非同期通信を行うための強力なツールです。その柔軟性と使いやすさから、多くの開発者に愛用されています。この記事で紹介した基本的な使い方と設定方法をマスターすれば、あなたも非同期通信のプロに一歩近づくでしょう。