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();