fetch()

// GETリクエストの基本的な書き方
fetch("URL")
	.then(function(response) { return response.json(); })
	.then(function(data) { /* 取得したデータを処理 */ });

// async/awaitを使った書き方
var response = await fetch("URL");
var data = await response.json();

sample_fetch.js

// GETリクエストでJSONデータを取得する例
fetch("https://wp-p.info/sandbox/api.php")
	.then(function(response) {
		if (!response.ok) {
			throw new Error("HTTPエラー: " + response.status); // エラー時に例外を投げます。
		}
		return response.json(); // JSON形式で解析します。
	})
	.then(function(data) {
		console.log(data); // 取得したデータが出力されます。
	})
	.catch(function(error) {
		console.log("通信エラー: " + error.message);
	});

sample_fetch.js

// POSTリクエストでデータを送信する例
fetch("https://wp-p.info/sandbox/api.php", {
	method: "POST",
	headers: {
		"Content-Type": "application/json"
	},
	body: JSON.stringify({ name: "狡噛慎也", age: 28 }) // オブジェクトをJSON文字列に変換して送信します。
})
	.then(function(response) { return response.json(); })
	.then(function(data) {
		console.log("登録完了: " + data.id);
	});

『async/await』については別ページで詳しく解説しています。詳しくは『async / await』を参照してください。

sample_fetch.js

// async/awaitを使った書き方
async function getUsers() {
	try {
		var response = await fetch("https://wp-p.info/sandbox/api.php");
		var data = await response.json();
		console.log(data);
	} catch (error) {
		console.log("通信エラー: " + error.message);
	}
}
getUsers();

sample_fetch_mistakes.js

// NG: 404や500でもcatchに入らないため、エラー処理が漏れる。
fetch("https://wp-p.info/sandbox/api.php?format=invalid")
	.then(function(response) {
		return response.json(); // 404でもここに来てしまいます。
	})
	.then(function(data) {
		console.log(data); // エラーなのに処理が続きます。
	});

// OK: response.ok を確認してからデータを処理します。
fetch("https://wp-p.info/sandbox/api.php?format=invalid")
	.then(function(response) {
		if (!response.ok) {
			throw new Error("HTTPエラー: " + response.status);
		}
		return response.json();
	})
	.then(function(data) {
		console.log(data);
	})
	.catch(function(error) {
		console.log("エラー: " + error.message);
	});

// NG: response.json() は1回しか呼べません。
fetch("https://wp-p.info/sandbox/api.php")
	.then(function(response) {
		console.log(response.json()); // 1回目
		return response.json();      // 2回目: エラーになります。
	});

sample_fetch_practical.html

<button id="fetch-btn">データを取得</button>
<pre id="result"></pre>

sample_fetch_practical.js

// パターン1: ボタンクリックでAPIを呼び出し、結果をページに表示します。
var fetchBtn = document.getElementById("fetch-btn");
var resultEl = document.getElementById("result");

if (fetchBtn && resultEl) {
	fetchBtn.addEventListener("click", function() {
		resultEl.textContent = "読み込み中...";
		fetchBtn.disabled = true;

		fetch("https://wp-p.info/sandbox/api.php?format=json")
			.then(function(response) {
				if (!response.ok) {
					throw new Error("HTTPエラー: " + response.status);
				}
				return response.json();
			})
			.then(function(data) {
				resultEl.textContent = JSON.stringify(data, null, 2);
			})
			.catch(function(error) {
				resultEl.textContent = "エラー: " + error.message;
			})
			.finally(function() {
				fetchBtn.disabled = false;
			});
	});
}

// パターン2: 認証ヘッダー付きリクエスト（APIトークン）。
function fetchWithAuth(url, token) {
	return fetch(url, {
		headers: {
			"Authorization": "Bearer " + token,
			"Content-Type": "application/json"
		}
	}).then(function(response) {
		if (!response.ok) { throw new Error("HTTPエラー: " + response.status); }
		return response.json();
	});
}

// パターン3: タイムアウト処理（AbortController）。
function fetchWithTimeout(url, ms) {
	var controller = new AbortController();
	var timeoutId = setTimeout(function() { controller.abort(); }, ms);
	return fetch(url, { signal: controller.signal })
		.then(function(response) {
			clearTimeout(timeoutId);
			if (!response.ok) { throw new Error("HTTPエラー: " + response.status); }
			return response.json();
		})
		.catch(function(error) {
			if (error.name === "AbortError") {
				throw new Error("タイムアウト (" + ms + "ms)");
			}
			throw error;
		});
}

サンプルページはこちら（パターン1の動作確認）

『fetch()』はサーバーとHTTP通信を行うための関数で、Promiseベースの非同期処理として動作します。APIからデータを取得したり、フォームの内容をサーバーに送信したりする際に使用します。

『fetch()』はネットワークエラーの場合にのみPromiseがrejectされ、404や500などのHTTPエラーではrejectされません。そのため、『response.ok』や『response.status』を確認してエラー処理を行う必要があります。

『fetch()』は従来の『XMLHttpRequest』を置き換えるモダンな方法として策定されました。Promiseベースのためコードが読みやすく、async/awaitと組み合わせることで同期処理のような直感的な記述が可能です。