![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/10/25
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、 fetch APIについて説明します。
fetchとは
サーバーからデータやファイルを取得するときに使うもので、
WebAPIの一種。
fetch APIはPromiseを返すので、
処理を分岐させたい場合は、
fetchの後に
.then（成功した際の処理）や
.catch（失敗した際の処理）を使用して、
処理をする必要がある。
|
1 2 3 |
fetch(resource, options) .then(() => '成功した際に行う処理') .catch(() => '失敗した際に行う処理') |
※optionsは省略可能
JSONPlaceholderを使用してAPIを叩く
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(async () => { const result = await fetch("https://jsonplaceholder.typicode.com/uers") .then((response) => { if (!response.ok) { console.error("response.ok:", response.ok); throw new Error(response.status); } return response.json(); }) .catch((error) => { return error; }); await console.log(result); })(); |
thenで結果が返却された場合
catchで結果が返却された場合
axiosとの違い
axiosはHTTPリクエストのやり取りができる
Promiseベースのライブラリ。
シンプルなAPIを提供するためHTTPリクエスト
(GET・POST・PUT・DELETE通信等)の処理が簡単に行える。
fetchはブラウザに組み込まれているため、
追加のインストールが不要だが、
axiosはライブラリのため、インストールする必要がある。
|
1 |
$ npm install axios |
axiosは、
JSONデータの自動変換も行ってくれるため、
レスポンスデータの処理がしやすい。
axiosの場合
|
1 2 3 4 |
axios.get("https://jsonplaceholder.typicode.com/users") .then(response => { console.log(response.data); // JSON 形式に変換済 }); |
fetchの場合
|
1 2 3 4 |
fetch("https://jsonplaceholder.typicode.com/users").then((response) => { // json() を使用してJSON 形式に変換 console.log(response.json()); }); |
エラーハンドリング
axiosを使用する場合 .catch()を使用し、
簡単にエラーハンドリングができるが、
fetchではレスポンスのokプロパティをチェックし、
エラーハンドリングをする必要がある。
|
1 2 3 4 5 6 7 8 9 10 11 |
(async () => { const result = await fetch("https://jsonplaceholder.typicode.com/uers") .then((response) => { return response.json(); }) .catch((error) => { return error; }); await console.log(result); })(); |
上記のように、エラーハンドリングをしていない状態だと、
fetchで情報を取得する際にエラーが発生するが、
catchの処理をしてくれない。
MDNより引用
fetch は
・ネットワーク通信に失敗した際に、.catch() が動く
・リクエストが失敗したかの確認は、response.okで返却値を確認する
レスポンスが成功（200-299 の範囲のステータス）
・ネットワーク通信に失敗した際に、.catch() が動く
・リクエストが失敗したかの確認は、response.okで返却値を確認する
レスポンスが成功（200-299 の範囲のステータス）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(async () => { const result = await fetch("https://jsonplaceholder.typicode.com/uers") .then((response) => { if (!response.ok) { console.error("response.ok:", response.ok); throw new Error(response.status); } return response.json(); }) .catch((error) => { return error; }); await |
Fetch API はネットワークエラーに遭遇したときに reject になるが、
エラーが発生していてもエラー処理がされない為、
上記記述のif文のように、
response.okで、エラーハンドリングをする必要がある。
promiseの中で、throw new Error() することで
その時点で処理を終了し、エラー処理をしてくれるようになる。
ブラウザ互換性
axiosはブラウザとNode.jsの両方で動作するが、
fetchはブラウザのみで動作する
axiosにあって、fetchにない機能
・リクエストのタイムアウト設定
・進行状況のモニタリング
axiosはfetchよりも簡単にHTTPリクエストの処理が行える、
エラーハンドリングも.catchを使用し
比較的簡単に設定できるというメリットがあるが、
fetchよりもメモリ使用量が多く、
大量のリクエストを行う場合には
パフォーマンスの問題が生じる場合がある。
特徴や使い勝手が異なる為、案件の規模や要件に合わせて、
適切に選択する必要がある。
ここまで読み進めていただきありがとうございます。
