Как заставить асинхронную функцию работать как обычную?

Question

У меня есть код, который XMLHttpRequest.Это объект для отправки запроса на сервер, и он асинхронный, поэтому, когда я хочу получить ответ, мне нужно предоставить функцию обратного вызова для свойства onreadystatechange этого объекта.И эта функция вызывается после получения ответа:

function send()
{
   XMLHttpRequest req = new...
   req.onreadystatechange = answer;
}

function answer()
{
   //handling the answer...
}

Так что это здорово, но я не хочу использовать новую функцию для обработки ответа, поэтому я делаю это анонимно:

function send()
{
   XMLHttpRequest req = new...
   req.onreadystatechange = function ()
   {
         //handling the answer...
   };
}

Но теперь я хочу использовать результат функции отправки в другой функции, например, для отображения результата:

display(send())

Итак, как заставить это работать?Что-то вроде:

function send()
{
   XMLHttpRequest req = new...
   req.onreadystatechange = function ()
   {
         //handling the answer...
         return result; //where result is returned by send function
   };
}

Есть ли способ сделать это так, чтобы другой код JS продолжал работать, пока этот код будет обрабатывать ответ?

Answer 1

С асинхронными функциями вам нужно сделать это противоположным образом. Вместо того, чтобы говорить display(send()), вам нужно подать в суд send(display)

function send(callback)
{
   XMLHttpRequest req = new...
   req.onreadystatechange = function ()
   {
         //handling the answer...
         callback(result);
   };
}

Попытка написать display(send()) не сработает. Функция send() создает значение асинхронно, но быстро возвращает значение. Он не может вернуть результат асинхронной операции.

Answer 2

Вы можете использовать синхронный вызов AJAX:

XMLHttpRequest req = new...
var result = null;
req.onreadystatechange = function() {
  if (req.readyState == 4) {
    if (req.status == 200) {
       result = req.responseText;
    }
  }
};
req.open('GET', url, false);  //async = false
return result;

Но это плохая практика, а не идиоматический способ работы с JavaScript. Цитирование Синхронные и асинхронные запросы :

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

Вы знаете, как использовать обратные вызовы, почему бы просто:

send(display)

Answer 3

Внутри обработчика readystatechange ответ доступен на req.responseText. Вы должны поместить свой вызов в display() внутри этого обработчика событий.