関数内でAjaxのレスポンスを返り値にする

関数内でAjaxを使用した際に、そのレスポンスを返り値にする方法をメモ。

サンプルコード

まずはうまくいかない例で、Ajaxの処理後にレスポンスを返してみます。

$(function() {
	var data = getData();
	console.log(data);
});

function getData() {
	$.ajax({
		url: 'data.json'
	})
	.then(
		function (data) {
			return data;
		},
		function (error) {
			return error;
		}
	);
}

この場合はレスポンスを返すことができず、consoleにはundefinedが表示されます。
Ajaxは非同期通信のため、レスポンスを返す前に関数内の処理が終わってしまうためです。
うまくいかない場合のデモページ

Ajaxの処理自体を返すようにすると、そのレスポンスを返り値にすることができます。

$(function() {
	var data = getData();
	console.log(data);
});

function getData() {
	return $.ajax({
		url: 'data.json'
	});
}

この場合はレスポンスを返り値として取得できました。
レスポンスを取得するデモページ

最初の例のようにthen()を使って成功時と失敗時で処理を分けたい場合、返り値を取得した後でその値に対してthen()を使うことができます。

$(function() {
	var data = getData();
	console.log(data);
	data.then(
		function (data) {
			console.log(data);
		},
		function (error) {
			console.log(error);
		}
	);
});

function getData() {
	return $.ajax({
		url: 'data.json'
	});
}

レスポンスを取得するデモページ2