Как подождать результата запроса (отключить асинхронность)?

Question

[DrunkMaster]

Есть такой код на JS:

var Need;

function XHRfunc(data) {
  var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest; var xhr = new XHR();
  xhr.open('GET', 'http://......................com', true);
  xhr.onload = function() {
    Need = this.responseText;
    console.log(Need); // Внимание 1
  }
  xhr.onerror = function(){ }
  xhr.send();
}

XHRfunc('go'); // Это запуск функции

function OtherFunc(data) {
  console.log(Need); // Внимание 2
}

Смысл в том, что сначала должна отработать функция XHRfunc() в ней присваивается значение глобальной переменной Need которая используется в следующей функции OtherFunc().
На деле в консоли видно сто сначала отрабатывает код с пометкой "Внимание 2" и только внизу кода приходят данные и срабатывает "Внимание 1", как правильно сделать что бы OtherFunc() не запускалась пока нет данных или выход из XHRfunc не производился?

Comments

[Camaro67]

Может лучше jQuery воспользоваться, если она используется в проекте?

[DrunkMaster]

Camaro67, на этой странице она не используется, тег стоит потому что смысл работы у этой штуки точно такой же как у JQuery

Answer 1

[Илья Герасимов]

async или обещания

var Need;

function XHRfunc(data) {
	return new Promise((resolve, reject) => {
		if (Need) return resolve(Need);

		var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest; var xhr = new XHR();
		xhr.open('GET', 'http://......................com', true);
		xhr.onload = function() {
			Need = this.responseText;
			resolve(Need);
		}

		xhr.onerror = function(){
			reject();
		}

		xhr.send();
	});
}

function OtherFunc(data) {
	XHRfunc('go').then(Need => {
		console.log(Need);
	});
}

привет говно код, но это просто пример

Answer 2

[Павел Корнилов]

xhr.open('GET', 'http://......................com', false);

Заменить эту строку на приведенную выше.

Comments

[DrunkMaster]

Тут что-то не так?

[Павел Корнилов]

Да не, все так, просто отвечаю на вопрос.

[Павел Корнилов]

В данном случае замена true на false как раз и отключит асинхронность. Это же требуется?

[DrunkMaster]

KorniloFF, вообще заработало, но выдал предупреждение: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

[Павел Корнилов]

Это нормально. Сейчас выдают броузеры предупреждения при выполнении синхронных запросов. Но работать должно еще долго, пока протокол не поменяется.

А вообще, можно и асинхронно все сделать, просто сложнее - через callback.

[Павел Корнилов]

Вот пример: https://js-master.ru/?Javascripts___Бесплатные_скр...

[DrunkMaster]

KorniloFF, В этом случае callback правильно делается как?

xhr.onload = function() {
    // nen jndtn
   OtherFunc(data);
}

Ещё проблема в том, что скрипт сложный и в начале эта штука должна сработать только после ответа xhr а потом в обычном режиме, выходит в первый раз когда на callback делаю надо как-то заблокировать её обычную загрузку? В общем голова кругом ))

[Vitaliy]

DrunkMaster, просто этот запрос блокирует основной поток, что не хорошо, особенно если загружаемый файл немаленький и загружается не перед стартом приложения, а во время его работы

[DrunkMaster]

Виталий Столяров, данные необходимы для работы скрипта, он от них зависит, продолжать скрипт без них бессмысленно....

[Vitaliy]

DrunkMaster, если это выполняется до того момента, как страница загружена, то не критично. Обычно это может негативно отразиться на юзерах, которые в тот момент захотят что-то понажимать

[Павел Корнилов]

В этом случае callback правильно делается как?

xhr.onreadystatechange = function() { 
    if (xhr.readyState != 4) {
     console.log('Сервер еще не ответил, в процессе');
     return;
    }

    if(xhr.status != 200) {
    	console.log('Страница не доступна');
    } else console.log('Данные получены, можно вызывать callback!!! Ура!!!');
    
   }

Я же давал ссылку на рабочий пример асинхронной отправки формы. Там реализовано такое же соединение с сервером. И после успешного ответа сервера надпись на кнопке меняется на Готово!.

Answer 3

[Владимир Скибин]

Используйте событийную модель, либо callback-модель. Смысл в том, чтобы вызывать функцию OtherFunc уже в onload. А делать синхронным AJAX-запрос - при медленном соединении, либо при большой загруженности сервера у Вас зависнет всястраница, что плохо отразится на пользователе.

Comments

[DrunkMaster]

Про callback думал, но:
1) Как в данном случае его использовать?

xhr.onload = function() {
    // что-то
   OtherFunc(data);
}