【イラスト付き】FetchAPI【利用方法】
はじめに
皆さんこんにちは。
今回はFetch APIをご紹介します。
Fetch APIはHTTPリクエストとレスポンスを扱うことができます。今回はFetch APIの記述の流れと代表的なリクエストメソッドごとの例をご紹介します。
こんな人にオススメ
- Fetch APIの概要が知りたい
- Fetch APIの書き方が知りたい
初めて学習する方にも分かるように、要点を絞って丁寧に解説していきます。
😋 Fetch APIの全体像をご紹介します♪
Fetch APIとは
まずポイントをチェック
- HTTPリクエスト・レスポンスを扱うAPI
- Promiseに対応した非同期処理
Fetch APIは非同期通信を行う機能です。HTTPリクエストを送信し、HTTPレスポンスを受け取るためのAPIです。
Fetch APIを使うことでサーバーと通信を行いデータのやり取りを行うことができます。ブラウザに標準で備わっているため、特別なライブラリや設定なしで利用できます。
Fetch APIで利用する関数はfetchです。この関数はPromiseに対応しており、非同期処理をasymc/awaitを使って記述することができます。
😋 サーバーと通信を行うための機能です♪
操作ステップ
まずポイントをチェック
- ステップ１：リクエストを送る
- ステップ２：レスポンスを受け取る
- ステップ３：レスポンスボディを取り出す
- ステップ４：取り出したデータで処理
Fetch APIを使ったサーバーからのデータ取得のステップをご紹介します。
ステップ１：リクエストを送る
fetch関数でサーバーにリクエストを送ります。このリクエストは非同期で行われます。戻り値はPromiseオブジェクトです。
ステップ２：レスポンスを受け取る
レスポンスを受け取るとPromiseが解決されます。この時responseオブジェクトを取得できます。
ステップ３：レスポンスボディを取り出す
受け取ったresponseオブジェクトからボディを取り出します。responseオブジェクトにはデータ形式に応じたメソッドが用意されています。
WebAPIで一般的に利用されるJSONデータを取り出すにはJSONメソッドを使います。なおこちらのメソッドもPromiseを返す非同期処理になっています。
ステップ４：取り出したデータで処理
データを取り出した後は自由に使ってOKです。
😋 レスポンスを受け取りボディを取り出します♪
基本のコード例
まずポイントをチェック
- ステップ１：リクエストを送る
- fetch関数を利用
- ステップ２：レスポンスを受け取る
- 正常なレスポンスかを判定
- ステップ３：レスポンスボディを取り出す
- jsonメソッドで取得
- ステップ４：取り出したデータで処理
操作ステップに沿ったシンプルなコードをご紹介します。
ステップ１：リクエストを送る
リクエストの送信はfetch関数を使います。Promiseに対応しているのでasync/awaitを利用することができます。Promiseが解決されるとresponseオブジェクトが取得できます。
fetch関数の引数にリクエスの送信先URLを指定します。
const response = await fetch('http://localhost:3000/data');
fetch関数は通信ができないなど、通信上のトラブルがある場合はエラーが発生します。そのためtry-catchでエラーハンドリングをしておく必要があります。なお、Promiseチェーンの場合はcatchメソッドに渡した処理が動作します。
try {
const response = await fetch('http://localhost:3000/data');
} catch {
alert('通信上の問題が発生しています');
}
ステップ２：レスポンスを受け取る
fetch関数のPromiseが解決されるとresponseオブジェクトが取得できます。responseオブジェクトの中には様々なプロパティやメソッドがあり、response内容を確認することができます。
正常なレスポンスが返ってきたことを確認するにはstatusプロパティやokプロパティを利用します。
statusプロパティにはレスポンスステータスコードが入っています。ステータスメッセージはstatusTextプロパティに入っています。
okプロパティはレスポンスステータスコードが200番台の場合はtrueが入っています。よって正常なレスポンスであるかはokプロパティで確認することができます。
try {
const response = await fetch('http://localhost:3000/data');
if (response.ok) {
...............
} else {
alert('正常なレスポンスではありません');
}
} catch {
alert('通信上の問題が発生しています');
}
ステップ３：レスポンスボディを取り出す
正常なレスポンスであることが確認できましたら、データを取り出します。responseオブジェクトにはデータ形式に対応した様々なメソッドが用意されています。
JSON形式のデータを取り出す場合はjsonメソッドを使います。jsonメソッドはPromiseを返す関数ですので、async/awaitを利用することができます。Promiseが解決されるとJSONデータをJavaScriptオブジェクトに変換したものを取得できます。
try {
const response = await fetch('http://localhost:3000/data');
if (response.ok) {
const datas = await response.json();
} else {
alert('正常なレスポンスではありません');
}
} catch {
alert('通信上の問題が発生しています');
}
ステップ４：取り出したデータで処理
データを取得した後は自由に処理に使ってOKです。画面に表示したり処理に使ったりなど目的に合わせて使います。
例では取得したデータを全件画面に表示しています。
try {
const response = await fetch('http://localhost:3000/data');
if (response.ok) {
const datas = await response.json();
const ul = document.querySelector('#result');
let list = '';
for (const data of datas) {
list += `<li>${data.id}:${data.title}</li>`;
}
ul.innerHTML = list;
} else {
alert('正常なレスポンスではありません');
}
} catch {
alert('通信上の問題が発生しています');
}
😋 fetchでリクエスト、jsonでデータの取得をします♪
GETリクエストの例
まずポイントをチェック
- fetchの第二引数を省略するとGETリクエストになる
- responseからjsonメソッドでJSONを取り出す
GETリクエストの送信方法をご紹介します。
fetch関数でGETリクエストを送るには引数に送信先URLを指定するだけです。リクエストはデフォルトでGETが指定されるため、特別な設定は不要です。
responseオブジェクトを受け取りましたら、responseオブジェクトのjsonメソッドでデータを取得します。JSONデータをJavaScriptオブジェクトに変換した上で取得できます。
今回のサンプルはサーバーからデータを取得し、コンソールに取得したものをそのまま表示しています。
const getBtn = document.querySelector('#get-btn');
getBtn.addEventListener('click', async () => {
const response = await fetch('http://localhost:3000/data');
const datas = await response.json();
console.log(datas);
});
😋 fetch関数はデフォルトでGETリクエストになります♪
POSTリクエストの例
まずポイントをチェック
- fetchの第二引数に設定オブジェクトを渡す
- methodプロパティにPOSTを指定
POSTリクエストの送信方法をご紹介します。
fetch関数でPOSTリクエストを送るには引数に送信先URLと設定オブジェクトを指定します。この設定オブジェクトにリクエストメソッドなどを指定します。
設定オブジェクトのmethodプロパティにリクエストメソッドを文字列で指定します。headersプロパティにヘッダーをオブジェクトで指定します。今回はJSONを送信するのでContent-Typeにapplication/jsonを指定しています。bodyには送信するJSONデータを指定します。JSON.stringifyで引数のオブジェクトをJSON形式に変換しています。
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: data })
}
今回のサンプルは画面の入力欄の値を取得し、サーバーに送信しています。最後にレスポンスの結果を画面に表示しています。
const postBtn = document.querySelector('#post-btn');
postBtn.addEventListener('click', async () => {
const input = document.querySelector('input');
const data = input.value;
const response = await fetch(
'http://localhost:3000/data',
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: data })
}
);
const result = document.querySelector('#result');
result.innerHTML +=
`ステータス：${response.status} （${response.statusText}）`;
});
😋 設定オブジェクトにPOSTメソッドと送信データを指定します♪
PUTリクエストの例
まずポイントをチェック
- fetchの第二引数に設定オブジェクトを渡す
- methodプロパティにPUTを指定
- パスパラメータで個別のリソースを指定してリクエスト
PUTリクエストの送信方法をご紹介します。
fetch関数でPUTリクエストを送るには引数に送信先URLと設定オブジェクトを指定します。この設定オブジェクトにリクエストメソッドなどを指定します。
{
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: data })
}
PUTは個別のデータを更新する際に利用するので、URLではパスパラメータを利用し個別のデータを指定しています。今回の例はIDが1のデータを更新するよう指定しています。
http://localhost:3000/data/1
今回のサンプルは画面の入力欄の値を取得し、サーバーに送信しています。最後にレスポンスの結果を画面に表示しています。
const putBtn = document.querySelector('#put-btn');
putBtn.addEventListener('click', async () => {
const input = document.querySelector('input');
const data = input.value;
const response = await fetch(
'http://localhost:3000/data/1',
{
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: data })
}
);
const result = document.querySelector('#result');
result.innerHTML +=
`ステータス：${response.status} （${response.statusText}）`;
});
😋 設定オブジェクトにPUTメソッドと送信データを指定します♪
DELETEリクエストの例
まずポイントをチェック
- fetchの第二引数に設定オブジェクトを渡す
- methodプロパティにDELETEを指定
- パスパラメータで個別のリソースを指定してリクエスト
DELETEリクエストの送信方法をご紹介します。
fetch関数でDELETEリクエストを送るには引数に送信先URLと設定オブジェクトを指定します。この設定オブジェクトにリクエストメソッドを指定します。DELETEは削除するだけなので、送信データは指定していません。
{
method: 'DELETE'
}
DELETEは個別のデータを削除する際に利用するので、URLではパスパラメータを利用し個別のデータを指定しています。今回の例はIDが1のデータを削除するよう指定しています。
http://localhost:3000/data/1
今回のサンプルはボタン押下で、ID1のデータを削除するリクエストをサーバーに送信しています。最後にレスポンスの結果を画面に表示しています。
const deleteBtn = document.querySelector('#delete-btn');
deleteBtn.addEventListener('click', async () => {
const response = await fetch(
'http://localhost:3000/data/1',
{
method: 'DELETE'
}
);
const result = document.querySelector('#result');
result.innerHTML +=
`ステータス：${response.status} （${response.statusText}）`;
});
😋 設定オブジェクトにDELETEメソッドを指定します♪
【おまけ】ダミーサーバーの用意
まずポイントをチェック
- json-serverを利用
- jsonファイルを用意するだけで準備OK
ダミーサーバーを作るにはjson-serverを使うと簡単です。json-serverはJSON形式でデータのやり取りを行うWebAPIとして動作します。
インストールは次のようにコマンドを実行します。
npm i json-server -D
データの管理は.json形式のファイルを利用します。json-serverはリクエストに応じて用意した.jsonファイルを読み書きします。ファイル名は任意の名前をつけることができます。
.jsonファイルはオブジェクトの形式で記述し、第一階層にはパスと対応するプロパティを用意します。今回の例はdataプロパティを用意しているのでリクエストURLは「http://localhost:3000/data」になります。
パスと対応するプロパティには配列を渡します。この配列が実際に扱うデータです。データはidプロパティを持ちます。idプロパティ以外は自由に決めて問題ありません。
idプロパティは自動採番に対応しているため、POSTで新規登録時はリクエストデータにidを含めなくても問題ありません。
{
"data": [
{
"id": 1,
"title": "data1"
},
{
"id": 2,
"title": "data2"
}
]
}
起動時は次のように.jsonファイルのパスを指定します。
npx json-server data.json
json-serverを利用すればクライアント側のプログラムの動作確認を簡単に行えます。
😋 JSONファイルを元に動作する簡易サーバーです♪
おわりに
皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。
Fetch APIについて確認をしていただきました。
クライアント側アプリケーションとは切っても切り離せない通信を実現できるようになります。
またPromiseにも対応しておりasync/awaitと組み合わせて簡潔に記述できます。
😋 これからもプログラミング学習頑張りましょう♪
参考リンク集
サンプルコード
Discussion