Расширение Chrome: почему мой ответ возвращается до вызова AJAX?

Question

Я делаю AJAX-вызов от моего popup.html примерно так ...

chrome.extension.sendRequest(
                    {
                        req: "send",
                        url: requrl
                    },
                    function(response)
                    {
                        console.log("RESPONSE:" + response.reply);
                    });

Этот код переходит в следующий случай в background.html ...

                case "send":
                sendResponse({
                    reply: send(request.url)
                });
                break;

который в свою очередь вызывает следующее ...

    function send(uri)
{
    var xhr = new XMLHttpRequest();
    xhr.open("POST",uri,true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    xhr.onreadystatechange = function (send){
        if(xhr.readyState == 4){
            return xhr.responseText;
        }
    }
    xhr.send(null);
}

Моя проблема в том, что мой код возвращает undefined до того, как send() сможет ответить.Как я могу заставить мой код ждать ответа?Мне нужно сохранить этот вызов асинхронным, потому что мне нужен не замороженный интерфейс для отображения диалогового окна прогресса.

Answer 1

Причина возврата undefined в том, что это результат функции send.Если вы посмотрите на функцию как она есть, она выйдет после send(null).Оператор возврата не будет выполнен до некоторого времени спустя, и к тому времени уже не будет ничего для его получения.

Если вы хотите ответить, когда запрос XHR завершится, вам необходимо использовать обратный вызов.

Вкратце:

case "send:"
  send(request.url, function(response) {
    sendResponse(response);
  })

function send(uri, callback) {
  ...
  xhr.onreadystatechange = function (send){
    if(xhr.readyState == 4){
      callback(xhr.responseText);
    }
  }
  ...
}

cf другие вопросы асинхронного обратного вызова .