Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

fetch()

サーバーにHTTPリクエストを送信し、レスポンスを取得するための関数です。Promiseを返すため、非同期処理として扱います。

構文

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

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

引数

引数	概要
URL	リクエスト先のURLを文字列で指定します。
オプション	省略可能です。リクエストの設定をオブジェクトで指定します。『method』『headers』『body』などを設定できます。

Responseオブジェクトのプロパティ・メソッド

プロパティ / メソッド	概要
response.ok	HTTPステータスコードが200〜299の場合に『true』を返します。
response.status	HTTPステータスコードを数値で返します。200は成功、404はページが見つからない、500はサーバーエラーを意味します。
response.json()	レスポンスをJSON形式で解析し、JavaScriptのオブジェクトとして返します。
response.text()	レスポンスをテキスト形式の文字列として返します。

サンプルコード

// GETリクエストでJSONデータを取得する例
fetch("https://api.example.com/users")
	.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);
	});

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

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

実行結果

GETリクエストが成功した場合、コンソールにはサーバーから返されたデータが出力されます。

// response.okが『true』の場合
[
	{ "id": 1, "name": "太郎" },
	{ "id": 2, "name": "花子" }
]

// response.okが『false』の場合、404エラーなどが該当します。
"HTTPエラー: 404"

概要

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

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

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

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPlaceウェブプログラミングプレイス