この記事ではJavaScriptのFetchの使い方について紹介します。
fetchを利用するかaxiosを利用するか迷う方がいるかもしれませんが今回はその違いには言及せず、あくまでfetchの利用方法について記載を行いますのでご了承ください。
Fetch APIとAxiosの違いについては下記の投稿で扱っております。興味のある方はぜひご覧ください。
Fetch APIとAxiosの違いそれでは早速みていきましょう。
fetch()の利用方法
fetch()の基本的な利用方法は下のソースコードのようになります。
fetch('https://api.example.com/data')
.then(response => response.json()) // レスポンスをJSON形式に変換
.catch(error => console.error('エラー:', error)); // エラーハンドリング
fetch()は指定したURLからリソースを非同期に取得し、それをPromiseオブジェクトとして返します。
それによって、データが取得された後に処理を続行することが可能となります。
エラーハンドリングの方法
fetch()はリクエストがネットワークエラーによって完全に失敗した場合を除き、Promiseをrejectしません。
代わりに、okステータスがfalseに設定されたResponseをresolveします。
HTTPステータスコードが404や500の場合でもこれに該当します。
これらの場合を適切に処理するには次のようにします:
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('ネットワーク応答がOKではありません');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('エラーが発生しました:', error));
fetch()を利用してPostリクエストを送信する
fetch()はGETリクエストだけでなく、POST、DELETEなど他のHTTPメソッドもサポートします。
早速、そのコードを紹介します。
下の例はContent-Type': 'application/json
のリクエストを送信する例です。
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));
fetch()に指定可能なオプション
fetch()の第二引数にはオプションとして設定可能なプロパティを含むオブジェクトを指定できます。
オプション | 説明 | 設定できるパラメータ |
---|---|---|
method | HTTPメソッドを指定 | GET’, ‘POST’, ‘DELETE’, ‘PUTなど |
headers | HTTPヘッダーを指定 | ‘Content-Type’: ‘application/json’ ‘Content-Type’: ‘application/x-www-form-urlencoded’ など |
body | リクエストボディを指定 | Blob、BufferSource、FormData、URLSearchParams、USVString |
mode | リクエストのモードを指定 | ‘cors’, ‘no-cors’, ‘same-origin’, ‘navigate’のいずれか デフォルトは ‘cors’ |
credentials | リクエストの資格情報の種類を指定 | ‘omit’, ‘same-origin’, ‘include’のいずれか デフォルトは ‘same-origin’ |
cache | リクエストのキャッシュモードを指定 | default’, ‘no-store’, ‘reload’, ‘no-cache’, ‘force-cache’, ‘only-if-cached’のいずれか |
redirect | リダイレクトの処理方法の指定 | ‘follow’, ‘error’, ‘manual’のいずれか デフォルトは ‘follow’ |
referrer | リファラーのURLを指定 | ‘no-referrer’, ‘client’など |
referrerPolicy | リファラーポリシーを指定 | ‘no-referrer’, ‘no-referrer-when-downgrade’, ‘origin’, ‘origin-when-cross-origin’, ‘unsafe-url’など |
integrity | subresource integrity value (SRI) を指定 | 特定の暗号学的ハッシュ値が期待されるリソースについて、それが提供されたときにその期待されるハッシュ値に一致することを要求します。 |
keepalive | リクエストが keepalive されるべきであるかどうかを示すブール値 | デフォルトは false です。 これは navigator.sendBeacon() と同じような挙動を引き起こします。 |