Как я могу вернуть ответ от асинхронного вызова?

Ваш код должен быть примерно таким:

function foo() {
var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', "/echo/json");
httpRequest.send();
return httpRequest.responseText;
}

var result = foo(); // always ends up being 'undefined'

Феликс Клинг отлично поработал, написав ответ для людей, использующих jQuery для AJAX. Я решил предоставить альтернативу тем, кто этого не делает.

(Обратите внимание, для тех, кто использует новый fetch API, Angular или обещания Я добавил еще один ответ ниже)

Это краткое изложение «Объяснение проблемы» из другого ответа, если вы не уверены, прочитав это, прочитайте это.

в AJAX расшифровывается как асинхронный. Это означает, что отправка запроса (или, вернее, получение ответа) исключается из обычного потока выполнения. В вашем примере .send немедленно возвращается и следующее утверждение, return result;, выполняется перед функцией, которую вы передали как success Обратный звонок даже был вызван.

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

Вот простая аналогия

function getFive(){
var a;
setTimeout(function(){
a=5;
},10);
return a;
}

(Fiddle)

Значение a вернулся undefined так как a=5 часть еще не выполнена. AJAX действует следующим образом: вы возвращаете значение до того, как у сервера появится возможность сообщить вашему браузеру, что это за значение.

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

function onComplete(a){ // When the code completes, do this
alert(a);
}

function getFive(whenDone){
var a;
setTimeout(function(){
a=5;
whenDone(a);
},10);
}

Это называется КПС. В основном мы проходим getFive действие, которое нужно выполнить после его завершения, мы сообщаем нашему коду, как реагировать на завершение события (например, наш вызов AJAX или в этом случае тайм-аут).

Использование будет:

getFive(onComplete);

Который должен предупредить «5» на экране. (Fiddle).

Есть два основных способа решения этой проблемы:

1. Сделайте вызов AJAX синхронным (давайте назовем его SJAX).
2. Реструктурируйте ваш код для правильной работы с обратными вызовами.

1. Синхронный AJAX — не делай этого !!

Что касается синхронного AJAX, не делай этого! Ответ Феликса вызывает некоторые убедительные аргументы о том, почему это плохая идея. Подводя итог, он замораживает браузер пользователя до тех пор, пока сервер не вернет ответ и не создаст очень плохой пользовательский опыт. Вот еще одно краткое изложение MDN о том, почему:

XMLHttpRequest поддерживает как синхронную, так и асинхронную связь. В целом, однако, асинхронные запросы должны быть предпочтительнее синхронных запросов по соображениям производительности.

Короче говоря, синхронные запросы блокируют выполнение кода … … это может вызвать серьезные проблемы …

если ты иметь Для этого вы можете передать флаг: Вот как:

var request = new XMLHttpRequest();
request.open('GET', 'yourURL', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {// That's HTTP for 'ok'
console.log(request.responseText);
}

2. Код реструктуризации

Позвольте вашей функции принять обратный вызов. В примере кода foo можно сделать, чтобы принять обратный вызов. Мы расскажем нашему коду, как реагировать когда foo завершается.

Так:

var result = foo();
// code that depends on `result` goes here

становится:

foo(function(result) {
// code that depends on `result`
});

Здесь мы передали анонимную функцию, но мы могли бы так же легко передать ссылку на существующую функцию, чтобы она выглядела так:

function myHandler(result) {
// code that depends on `result`
}
foo(myHandler);

Для получения более подробной информации о том, как делается этот дизайн обратного вызова, проверьте ответ Феликса.

Теперь давайте определим сам foo, чтобы действовать соответственно

function foo(callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onload = function(){ // when the request is loaded
callback(httpRequest.responseText);// we're calling our method
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();
}

(Скрипка)

Теперь мы заставили нашу функцию foo принимать действие, которое запускается после успешного завершения AJAX, мы можем расширить его, проверив, не является ли статус ответа 200 и действуя соответствующим образом (создайте обработчик ошибок и тому подобное). Эффективно решая нашу проблему.

Если вам все еще трудно понять это прочтите руководство по началу работы с AJAX в MDN.

XMLHttpRequest 2 (прежде всего прочитайте ответы от Бенджамин Грюнбаум & Феликс Клинг)

Если вы не используете jQuery и хотите получить хороший короткий XMLHttpRequest 2, который работает в современных браузерах, а также в мобильных браузерах, я предлагаю использовать его следующим образом:

function ajax(a, b, c){ // URL, callback, just a placeholder
c = new XMLHttpRequest;
c.open('GET', a);
c.onload = b;
c.send()
}

Как вы видете:

1. Это короче, чем все остальные функции, перечисленные.
2. Обратный вызов устанавливается напрямую (поэтому никаких лишних ненужных замыканий).
3. Он использует новую нагрузку (так что вам не нужно проверять состояние готовности) && статус)
4. Есть некоторые другие ситуации, которые я не помню, которые делают XMLHttpRequest 1 раздражающим.

Есть два способа получить ответ на этот вызов Ajax (три с использованием имени переменной XMLHttpRequest):

Простейший:

this.response

Или если по какой-то причине вы bind() обратный вызов в класс:

e.target.response

Пример:

function callback(e){
console.log(this.response);
}
ajax('URL', callback);

Или (вышеприведенный лучше анонимные функции всегда проблема):

ajax('URL', function(e){console.log(this.response)});

Нет ничего проще.

Теперь некоторые люди, вероятно, скажут, что лучше использовать onreadystatechange или даже имя переменной XMLHttpRequest. Это неверно.

Проверять, выписываться XMLHttpRequest расширенные функции

Поддерживаются все * современные браузеры. И я могу подтвердить, что использую этот подход, так как существует XMLHttpRequest 2. У меня никогда не было никаких проблем во всех браузерах, которые я использую.

onreadystatechange полезен, только если вы хотите получить заголовки в состоянии 2.

С использованием XMLHttpRequest Имя переменной — еще одна большая ошибка, так как вам нужно выполнить обратный вызов внутри замыканий onload / oreadystatechange, иначе вы его потеряли.

Теперь, если вы хотите что-то более сложное, используя post и FormData, вы можете легко расширить эту функцию:

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val},placeholder
c = new XMLHttpRequest;
c.open(e||'get', a);
c.onload = b;
c.send(d||null)
}

Опять же … это очень короткая функция, но она получает & сообщение.

Примеры использования:

x(url, callback); // By default it's get so no need to set
x(url, callback, 'post', {'key': 'val'}); // No need to set post data

Или передать полный элемент формы (document.getElementsByTagName('form')[0]):

var fd = new FormData(form);
x(url, callback, 'post', fd);

Или установите некоторые пользовательские значения:

var fd = new FormData();
fd.append('key', 'val')
x(url, callback, 'post', fd);

Как видите, я не реализовал синхронизацию … это плохо.

Сказав это … почему бы не сделать это простым способом?

Как уже упоминалось в комментарии, использование ошибки && синхронный полностью нарушает точку ответа. Какой хороший короткий способ правильно использовать Ajax?

Обработчик ошибок

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val}, placeholder
c = new XMLHttpRequest;
c.open(e||'get', a);
c.onload = b;
c.onerror = error;
c.send(d||null)
}

function error(e){
console.log('--Error--', this.type);
console.log('this: ', this);
console.log('Event: ', e)
}
function displayAjax(e){
console.log(e, this);
}
x('WRONGURL', displayAjax);

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

Но чтобы действительно вывести ошибку только способ заключается в том, чтобы написать неправильный URL, в этом случае каждый браузер выдает ошибку.

Обработчики ошибок могут быть полезны, если вы устанавливаете пользовательские заголовки, устанавливаете responseType для буфера массива blob или чего-то еще …

Даже если вы передадите POSTAPAPAP в качестве метода, он не выдаст ошибку.

Даже если вы передадите ‘fdggdgilfdghfldj’ в качестве форм-данных, это не выдаст ошибку.

В первом случае ошибка находится внутри displayAjax() под this.statusText как Method not Allowed,

Во втором случае это просто работает. Вы должны проверить на стороне сервера, если вы передали правильные данные поста.

междоменный домен не разрешен, выдает ошибку автоматически.

В ответе об ошибке нет кодов ошибок.

Есть только this.type который установлен на ошибку.

Зачем добавлять обработчик ошибок, если вы полностью не можете контролировать ошибки?
Большинство ошибок возвращаются внутри этого в функции обратного вызова displayAjax(),

Итак: нет необходимости в проверке ошибок, если вы можете правильно скопировать и вставить URL. 😉

PS: В качестве первого теста я написал x (‘x’, displayAjax) …, и он полностью получил ответ … ??? Поэтому я проверил папку, в которой находится HTML, и там был файл с именем «x.xml». Так что даже если вы забудете расширение вашего файла, XMLHttpRequest 2 НАЙДЕТ ЕГО. Я смеюсь

Чтение файла синхронно

Не делай этого.

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

function omg(a, c){ // URL
c = new XMLHttpRequest;
c.open('GET', a, true);
c.send();
return c; // Or c.response
}

Теперь вы можете сделать

 var res = omg('thisIsGonnaBlockThePage.txt');

Нет другого способа сделать это не асинхронно. (Да, с циклом setTimeout … но серьезно?)

Другой момент … если вы работаете с API-интерфейсами, или просто с файлами собственного списка, или с чем угодно, вы всегда используете разные функции для каждого запроса …

Только если у вас есть страница, на которую вы загружаете всегда один и тот же XML / JSON или что-то еще, вам нужна только одна функция. В этом случае немного измените функцию Ajax и замените b своей специальной функцией.

Функции выше предназначены для базового использования.

Если вы хотите расширить функцию …

Да, ты можешь.

Я использую множество API, и одной из первых функций, которые я интегрирую в каждую HTML-страницу, является первая функция Ajax в этом ответе, только с GET …

Но вы можете многое сделать с XMLHttpRequest 2:

Я сделал менеджер загрузок (используя диапазоны с обеих сторон с помощью резюме, файлового ридера, файловой системы), различные конвертеры, изменяющие размер изображения, используя холст, заполнял базы данных веб-SQL с помощью base64images и многое другое … Но в этих случаях вы должны создать функцию только для этого цель … иногда вам нужны блоб, буферы массивов, вы можете установить заголовки, переопределить mimetype и многое другое …

Но вопрос здесь в том, как вернуть ответ Ajax … (я добавил простой способ.)

Это означает AngularJS, jQuery (с отсрочкой), замену (извлечение) собственного XHR, сохранение EmberJS, BackboneJS или любую библиотеку узлов, которая возвращает обещания.

Ваш код должен быть примерно таким:

function foo() {
var data;
// or $.get(...).then, or request(...).then, or query(...).then
fetch("/echo/json").then(function(response){
data = response.json();
});
return data;
}

var result = foo(); // result is always undefined no matter what.

Феликс Клинг отлично справился с написанием ответа для людей, использующих jQuery с обратными вызовами для AJAX. У меня есть ответ для родного XHR. Этот ответ предназначен для общего использования обещаний на веб-интерфейсе или на сервере.

Модель параллелизма JavaScript в браузере и на сервере с NodeJS / io.js асинхронный а также реактивный.

Всякий раз, когда вы вызываете метод, который возвращает обещание, then обработчики всегда выполняется асинхронно — то есть после код под ними, который не находится в .then обработчик.

Это значит, когда вы возвращаетесь data then определенный вами обработчик еще не выполнен Это, в свою очередь, означает, что возвращаемое вами значение не было правильно установлено во времени.

Вот простая аналогия для вопроса:

    function getFive(){
var data;
setTimeout(function(){ // set a timer for one second in the future
data = 5; // after a second, do this
}, 1000);
return data;
}
document.body.innerHTML = getFive(); // `undefined` here and not 5

function handleData( responseData ) {

// Do what you want with the data
console.log(responseData);
}

$.ajax({
url: "hi.php",
...
success: function ( data, status, XHR ) {
handleData(data);
}
});

function callServerAsync(){
$.ajax({
url: '...',
success: function(response) {

successCallback(response);
}
});
}

function successCallback(responseObj){
// Do something like read the response and show data
alert(JSON.stringify(responseObj)); // Only applicable to JSON response
}

function foo(callback) {

$.ajax({
url: '...',
success: function(response) {
return callback(null, response);
}
});
}

var result = foo(function(err, result){
if (!err)
console.log(result);
});

  promiseB = promiseA.then(
function onSuccess(result) {
return result + 1;
}
,function onError(err) {
//Handle error
}
);

// promiseB will be resolved immediately after promiseA is resolved
// and its value will be the result of promiseA incremented by 1.

 search(term: string) {
return this.http
.get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)
.map((response) => response.json())
.toPromise();

search() {
this.searchService.search(this.searchField.value)
.then((result) => {
this.result = result.artists.items;
})
.catch((error) => console.error(error));
}