Почему при попытке возвращение ответа json в функцию, возвращается undefined? Как это исправить?

Question

[ixon]

Вот этот код по идее должен возвращать ответ с запроса localhost/ajax.json?get=1, однако возвращает undefined:

function testj(e){
		var returnData="";
		$.ajax({
			url:"http://localhost/ajax.json?get="+e,
			dataType: 'jsonp',
			success:function(json){
				returnData = json;
				console.log(json);//работает
			}
		});
		return returnData;//не возвращает json объект
	}
console.log(testj("1"));

Answer 1

[olamedia .]

Потому что success выполняется позже return
A в AJAX - асинхронный

> исправить
выполнить код в success, например

Comments

[ixon]

Возможны-ли другие варианты исправления? Дело в том, что ответы совершенно разные и для каждого ответа подразумивалась отдельная функция, поэтому писать все варианты в один внутри success не вариант.

[olamedia .]

ixon: передать callback в success: function testj(e, callback){....success:function(json){ callback(json)

[olamedia .]

ixon: альтернативно - см Евгений Петров $.Deferred либо другую реализацию promises

[ixon]

olamedia .: добавил параметр callback в функцию, в функции success обратился к callback как к функции с параметром json, в итоге только ошибку выдало. Через $.Deferred ещё попробую.

[olamedia .]

ixon: ну, в testj теперь надо передавать функцию, которая принимает данные - результат запроса

[olamedia .]

ixon: testj(..., function(data){ // действия с результатом

[ixon]

olamedia .: если я всё правильно понял, то выходит так, да?
function testj(e, callback){
$.ajax({
url:"localhost/ajax.json?get="+e,
dataType: 'jsonp',
success:function(json){
callback(json);
}
});
}
testj(e, function(json){console.log(json)});

[olamedia .]

ixon: да

Answer 2

[Евгений Петров]

Для организации работы с асинхронным кодом (XMLHttpRequest или setTimeout) нужно использовать функции, возвращающие объекты promise, поскольку функция завершит свою работу в потоке раньше, чем будет выполнен асинхронный вызов.
В jQuery для этого реализован Deferred Object. Причём в методе ajax() он реализован по умолчанию.

Вот примерно так с проверкой на наличие объекта:

testj('1').then(function (json) {
	console.log(json);
});

function testj (e) {
	var d = $.Deferred(),
		x = ...; //Проверяем, вдруг объект уже получен и сохранён

	if (x) { //Объект уже есть
		d.resolve(x);
	} else { //Объект нужно загрузить
		$.ajax({
			url: 'http://localhost/ajax.json?get=' + e,
			dataType: 'json'
		}).done(function (data) {
			... //Например, сохраняем
			d.resolve(data);
		});
	}

	return d.promise();
}

И откройте тайну — зачем вам jsonp? Вы не используете callback.

Comments

[ixon]

Для кросс-доменных запросов на https.

[Евгений Петров]

Да, я уже увидел ваш комментарий к другому ответу.
Тогда передавайте при вызове testj() параметр для проставления нужного callback.

[ixon]

Евгений Петров: ок, добавлю, а дальше чего с ним делать? Присваивать к нему внутри success ответ, а после аякса вывести в return?

[Евгений Петров]

JSONP применяется исключительно в случае кросс-доменного запроса к серверу, не разрешающему вашему домену получать их. В этом случае в адресе запроса указывается имя callback-функции, по которому её можно найти из глобального контекста. Вместо объекта XMLHttpRequest формируется скрипт с указанным адресом, по которому находится код, который и запустит указанную функцию после своей загрузки.

В вашем же случае данные загружаются со своего же домена, и надобности в анахронизме типа JSONP нет никакой. Вам нужно только ответить на вопрос — когда определяется, кто будет обрабатывать полученные данные — до отправки запроса на основании анализа параметров или на основе предварительного анализа полученного ответа?

Если до отправки запроса — передаём параметр в функцию testj (просто ссылка на функцию). Если после ответа — тут вообще понятно и никаких вопросов по идее не возникает.

[ixon]

Евгений Петров: нет-нет, запрос я отправляю не на свой сайт, а на другой. Тут именно кросс-доменный запрос. Где-же мне всё-таки поймать этот самый ответ? Не понимаю.

[Евгений Петров]

Почитайте про JSONP. Там же есть и пример.
Как вы должны понимать, серверный скрипт, адрес которого и служит основой для запроса, берёт глобальный метод из параметра. Остальные данные запроса также могут участвовать в формировании адресной строки. Всё это обычно описывается в API сервиса.

Вот примерно так можно сформировать:

var getData = (function () {
	var defer,
		name = 'CallbackRegistry_' + Math.round(1e6 * Math.random()),
		_class = {
			run: function (id, callback) {
				defer = $.Deferred();
				window[name] = this.methods[callback];
				$.ajax({
					url: '//learn.javascript.ru/files/tutorial/ajax/jsonp/user?user=' + id,
					dataType: 'jsonp',
					jsonpCallback: name
				});

				return defer.promise();
			},
			done: function (data) {
				delete window[name];
				defer.resolve(data);
			},
			methods: {
				c1: function (data) {
					console.log(data.name);
					_class.done(data);
				},
				c2: function (data) {
					console.log(data.age);
					_class.done(data);
				}
			}
		};

	return _class;
})();

getData.run('1', 'c1').then(function (data) {
	console.log('done: ', data);
	getData.run('7', 'c2').then(function (data) {
		console.log('done: ', data);
	});
});