У меня есть функция, fooкоторая делает запрос Ajax. Как я могу вернуть ответ от foo?

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

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            // return response; // <- I tried that one as well
        }
    });

    return result;
}

var result = foo(); // It always ends up being `undefined`.

→ Для более общего объяснения асинхронного поведения на разных примерах см. Почему моя переменная не изменяется после того, как я изменил ее внутри функции? - асинхронная ссылка на код

→ Если вы уже поняли проблему, перейдите к возможным решениям ниже.

Проблема

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

Вот аналогия, которая, надо надеяться, проясняет разницу между синхронным и асинхронным потоком:

синхронный

Представьте, что вы позвонили другу и попросили его найти что-то для вас. Хотя это может занять некоторое время, вы ждете по телефону и смотрите в пространство, пока ваш друг не даст вам ответ, который вам нужен.

То же самое происходит, когда вы делаете вызов функции, содержащий «нормальный» код:

function findItem() {
    var item;
    while(item_not_found) {
        // search
    }
    return item;
}

var item = findItem();

// Do something with item
doSomethingElse();

Несмотря на то, что выполнение findItemможет занять много времени, любой следующий код var item = findItem();должен ждать, пока функция вернет результат.

Асинхронный

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

Это именно то, что происходит, когда вы делаете запрос Ajax.

findItem(function(item) {
    // Do something with item
});
doSomethingElse();

Вместо ожидания ответа выполнение продолжается немедленно и выполняется оператор после вызова Ajax. Чтобы в конечном итоге получить ответ, вы предоставляете функцию, которая будет вызываться после получения ответа, обратный вызов (заметьте что-нибудь, « перезвоните» ). Любой оператор, следующий за этим вызовом, выполняется до вызова обратного вызова.

Решение (s)

Примите асинхронную природу JavaScript! Хотя некоторые асинхронные операции предоставляют синхронные аналоги (как и «Ajax»), обычно их не рекомендуется использовать, особенно в контексте браузера.

Почему это плохо, спросите вы?

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

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

Далее мы рассмотрим три различных решения, которые все строятся друг на друге:

• Обещания сasync/await (ES2017 +, доступный в старых браузерах, если вы используете транспортер или регенератор)
• Обратные вызовы (популярные в узле)
• Обещания сthen() (ES2015 +, доступно в старых браузерах, если вы используете одну из множества библиотек обещаний)

Все три доступны в текущих браузерах, и узел 7+.

ES2017 +: обещания с async/await

Версия ECMAScript, выпущенная в 2017 году, представила поддержку на уровне синтаксиса для асинхронных функций. С помощью asyncи awaitвы можете написать асинхронный в «синхронном стиле». Код все еще асинхронный, но его легче читать / понимать.

async/awaitосновывается на обещаниях: asyncфункция всегда возвращает обещание. await«разворачивает» обещание и либо приводит к значению, с которым обещание было разрешено, либо выдает ошибку, если обещание было отклонено.

Важно: вы можете использовать только awaitвнутри asyncфункции. В настоящее время верхний уровень awaitеще не поддерживается, поэтому вам может потребоваться сделать асинхронное IIFE ( выражение для немедленного вызова функции ), чтобы запустить asyncконтекст.

Вы можете прочитать больше о asyncи awaitна MDN.

Вот пример, который основан на задержке выше:

// Using 'superagent' which will return a promise.
var superagent = require('superagent')

// This is isn't declared as `async` because it already returns a promise
function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}


async function getAllBooks() {
  try {
    // GET a list of book IDs of the current user
    var bookIDs = await superagent.get('/user/books');
    // wait for 3 seconds (just for the sake of this example)
    await delay();
    // GET information about each book
    return await superagent.get('/books/ids='+JSON.stringify(bookIDs));
  } catch(error) {
    // If any of the awaited promises was rejected, this catch block
    // would catch the rejection reason
    return null;
  }
}

// Start an IIFE to use `await` at the top level
(async function(){
  let books = await getAllBooks();
  console.log(books);
})();

Поддержка текущих версий браузера и узлаasync/await . Вы также можете поддерживать более старые среды, преобразовав свой код в ES5 с помощью регенератора (или инструментов, использующих регенератор, таких как Babel ).

Пусть функции принимают обратные вызовы

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

В примере с вопросом вы можете fooпринять обратный вызов и использовать его в качестве successобратного вызова. Так это

var result = foo();
// Code that depends on 'result'

становится

foo(function(result) {
    // Code that depends on 'result'
});

Здесь мы определили функцию «inline», но вы можете передать любую ссылку на функцию:

function myCallback(result) {
    // Code that depends on 'result'
}

foo(myCallback);

foo само определяется следующим образом:

function foo(callback) {
    $.ajax({
        // ...
        success: callback
    });
}

callbackбудет ссылаться на функцию, которую мы передаем, fooкогда мы ее вызываем, и мы просто передаем ее success. Т.е. как только Ajax-запрос будет успешным, $.ajaxон вызовет callbackи передаст ответ на обратный вызов (на который можно ссылаться result, поскольку именно так мы определили обратный вызов).

Вы также можете обработать ответ, прежде чем передать его обратному вызову:

function foo(callback) {
    $.ajax({
        // ...
        success: function(response) {
            // For example, filter the response
            callback(filtered_response);
        }
    });
}

Писать код с помощью обратных вызовов проще, чем может показаться. В конце концов, JavaScript в браузере сильно зависит от событий (события DOM). Получение ответа Ajax - не что иное, как событие.
Сложности могут возникнуть, когда вам придется работать со сторонним кодом, но большинство проблем можно решить, просто продумав поток приложения.

ES2015 +: обещания с then ()

Promise API является новой функцией ECMAScript 6 (ES2015), но она имеет хорошую поддержку браузера уже. Есть также много библиотек, которые реализуют стандартный API Promises и предоставляют дополнительные методы для упрощения использования и составления асинхронных функций (например, bluebird ).

Обещания - это контейнеры для будущих ценностей. Когда обещание получает значение (оно разрешено ) или когда оно отменено ( отклонено ), оно уведомляет всех своих «слушателей», которые хотят получить доступ к этому значению.

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

Вот простой пример использования обещания:

function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

delay()
  .then(function(v) { // `delay` returns a promise
    console.log(v); // Log the value once it is resolved
  })
  .catch(function(v) {
    // Or do something else if it is rejected 
    // (it would not happen in this example, since `reject` is not called).
  });

Применительно к нашему вызову Ajax мы можем использовать такие обещания:

function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(this.responseText);
    };
    xhr.onerror = reject;
    xhr.open('GET', url);
    xhr.send();
  });
}

ajax("/echo/json")
  .then(function(result) {
    // Code depending on result
  })
  .catch(function() {
    // An error occurred
  });

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

Больше информации об обещаниях: HTML5 - скалы - Обещания JavaScript

Примечание: отложенные объекты jQuery

Отложенные объекты - это пользовательская реализация обещаний в jQuery (до стандартизации API Promise). Они ведут себя почти как обещания, но выставляют немного другой API.

Каждый Ajax-метод jQuery уже возвращает «отложенный объект» (фактически обещание отложенного объекта), который вы можете просто вернуть из своей функции:

function ajax() {
    return $.ajax(...);
}

ajax().done(function(result) {
    // Code depending on result
}).fail(function() {
    // An error occurred
});

Примечание: обещание получилось

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

function checkPassword() {
    return $.ajax({
        url: '/password',
        data: {
            username: $('#username').val(),
            password: $('#password').val()
        },
        type: 'POST',
        dataType: 'json'
    });
}

if (checkPassword()) {
    // Tell the user they're logged in
}

Этот код неправильно понимает вышеуказанные проблемы асинхронности. В частности, $.ajax()не останавливает код, пока проверяет страницу «/ пароль» на вашем сервере - он отправляет запрос на сервер и, ожидая, немедленно возвращает объект JQuery Ajax Deferred, а не ответ от сервера. Это означает, что ifоператор будет всегда получать этот отложенный объект, обрабатывать его как trueи продолжать, как если бы пользователь вошел в систему. Не хорошо.

Но исправить это легко:

checkPassword()
.done(function(r) {
    if (r) {
        // Tell the user they're logged in
    } else {
        // Tell the user their password was bad
    }
})
.fail(function(x) {
    // Tell the user something bad happened
});

Не рекомендуется: синхронные вызовы "Ajax"

Как я уже говорил, некоторые (!) Асинхронные операции имеют синхронные аналоги. Я не защищаю их использование, но для полноты картины, вот как вы должны выполнить синхронный вызов:

Без jQuery

Если вы напрямую используете XMLHTTPRequestобъект, передайте в falseкачестве третьего аргумента .open.

JQuery

Если вы используете jQuery , вы можете установить asyncопцию на false. Обратите внимание, что эта опция устарела начиная с jQuery 1.8. Затем вы можете использовать successобратный вызов или получить доступ к responseTextсвойству объекта jqXHR :

function foo() {
    var jqXHR = $.ajax({
        //...
        async: false
    });
    return jqXHR.responseText;
}

Если вы используете любой другой метод jQuery Ajax, такой как $.get, $.getJSONи т. Д., Вы должны изменить его на $.ajax(поскольку вы можете только передавать параметры конфигурации в $.ajax).

Берегись! Невозможно сделать синхронный запрос JSONP . JSONP по своей природе всегда асинхронен (еще одна причина, чтобы даже не рассматривать эту опцию).

Если вы не используете JQuery в своем коде, этот ответ для вас

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

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. Я решил предоставить альтернативу тем, кто этого не делает.

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

С чем вы сталкиваетесь

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

В AJAX означает асинхронный . Это означает, что отправка запроса (или, вернее, получение ответа) исключается из обычного потока выполнения. В вашем примере сразу возвращается, и следующий оператор, выполняется до того, как функция, которую вы передали в качестве обратного вызова, даже была вызвана..sendreturn 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);
}

Это называется CPS . По сути, мы передаем 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);

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

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

Как уже упоминалось в комментарии, использование error && синхронный полностью нарушает смысл ответа. Какой хороший короткий способ правильно использовать 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.statusTextas 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

Значение dataявляется , undefinedтак как data = 5часть еще не выполнена. Вероятно, он будет выполнен через секунду, но к тому времени он не будет иметь отношения к возвращаемому значению.

Поскольку операция еще не произошла (AJAX, серверный вызов, IO, таймер), вы возвращаете значение до того, как запрос получит возможность сообщить вашему коду, что это за значение.

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

Краткий обзор обещаний

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

• выполнив это означает, что вычисление завершено успешно.
• отклонено означает, что вычисление не удалось.

Обещание может изменить состояние только один раз, после чего оно всегда будет оставаться в одном и том же состоянии навсегда. Вы можете прикрепить thenобработчики к обещаниям, чтобы извлечь их значение и обработать ошибки. thenобработчики позволяют связывать вызовы. Обещания создаются с помощью API, которые их возвращают . Например, более современная замена AJAX fetchили $.getобещания возврата jQuery .

Когда мы вызываем .thenобещание и возвращаем что-то из него - мы получаем обещание для обработанного значения . Если мы ответим на другое обещание, мы получим удивительные вещи, но давайте держать наших лошадей

С обещаниями

Давайте посмотрим, как мы можем решить вышеуказанную проблему с обещаниями. Во-первых, давайте продемонстрируем наше понимание состояний обещаний сверху, используя конструктор Promise для создания функции задержки:

function delay(ms){ // takes amount of milliseconds
    // returns a new promise
    return new Promise(function(resolve, reject){
        setTimeout(function(){ // when the time is up
            resolve(); // change the promise to the fulfilled state
        }, ms);
    });
}

Теперь, после того как мы преобразовали setTimeout для использования обещаний, мы можем использовать thenего для подсчета:

function delay(ms){ // takes amount of milliseconds
  // returns a new promise
  return new Promise(function(resolve, reject){
    setTimeout(function(){ // when the time is up
      resolve(); // change the promise to the fulfilled state
    }, ms);
  });
}

function getFive(){
  // we're RETURNING the promise, remember, a promise is a wrapper over our value
  return delay(100).then(function(){ // when the promise is ready
      return 5; // return the value 5, promises are all about return values
  })
}
// we _have_ to wrap it like this in the call site, we can't access the plain value
getFive().then(function(five){ 
   document.body.innerHTML = five;
});

В принципе, вместо того , чтобы возвращать значение , которое мы не можем сделать из модели параллелизма - мы возвращаемся в обертку для значения , которое мы можем UnWrap с then. Это как коробка, с которой вы можете открыть then.

Применяя это

То же самое относится к исходному вызову API, вы можете:

function foo() {
    // RETURN the promise
    return fetch("/echo/json").then(function(response){
        return response.json(); // process it inside the `then`
    });
}

foo().then(function(response){
    // access the value inside the `then`
})

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

ES2015 (ES6)

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

function* foo(){ // notice the star, this is ES6 so new browsers/node/io only
    yield 1;
    yield 2;
    while(true) yield 3;
}

Функция, которая возвращает итератор последовательности, 1,2,3,3,3,3,....которая может быть повторена. Хотя это само по себе интересно и открывает много возможностей, есть один интересный случай.

Если последовательность, которую мы создаем, является последовательностью действий, а не чисел - мы можем приостановить функцию всякий раз, когда действие дается, и ждать его, прежде чем мы возобновим функцию. Таким образом, вместо последовательности чисел нам нужна последовательность будущих значений, то есть обещаний.

Этот несколько хитрый, но очень мощный трюк позволяет нам писать асинхронный код синхронно. Есть несколько «бегунов», которые делают это для вас, написание одного - несколько строк кода, но выходит за рамки этого ответа. Я буду использовать Bluebird Promise.coroutineздесь, но есть и другие обертки, такие как coили Q.async.

var foo = coroutine(function*(){
    var data = yield fetch("/echo/json"); // notice the yield
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
});

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

var main = coroutine(function*(){
   var bar = yield foo(); // wait our earlier coroutine, it returns a promise
   // server call done here, code below executes when done
   var baz = yield fetch("/api/users/"+bar.userid); // depends on foo's result
   console.log(baz); // runs after both requests done
});
main();

ES2016 (ES7)

В ES7 это еще более стандартизировано, сейчас есть несколько предложений, но во всех из них вы можете awaitпообещать. Это просто «сахар» (лучше синтаксис) для предложения ES6 выше, добавив asyncи awaitключевые слова. Делаем приведенный выше пример:

async function foo(){
    var data = await fetch("/echo/json"); // notice the await
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
}

Это все еще возвращает обещание точно так же :)

Вы используете Ajax неправильно. Идея не в том, чтобы он что-либо возвращал, а в том, чтобы передать данные чему-то, что называется функцией обратного вызова, которая обрабатывает данные.

Это:

function handleData( responseData ) {

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

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

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

Самое простое решение - создать функцию JavaScript и вызвать ее для successобратного вызова Ajax .

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);    
}); 

Я отвечу ужасно выглядящим, нарисованным от руки комиксом. Второе изображение является причиной , почему resultэто undefinedв вашем примере кода.

Angular1

Для людей, которые используют AngularJS , могут справиться с этой ситуацией, используя Promises.

Здесь говорится,

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

Вы также можете найти хорошее объяснение здесь .

Пример найден в документах, упомянутых ниже.

  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.

Angular2 и позже

В Angular2с видом на следующем примере, но его рекомендуется для использования Observablesс Angular2.

 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));
}

Смотрите оригинальный пост здесь. Но Typescript не поддерживает встроенные обещания es6 , если вы хотите его использовать, вам может понадобиться плагин для этого.

Кроме того, здесь приведена спецификация обещаний .

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

// WRONG
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log(results); // E.g., using them, returning them, etc.

Пример:

// WRONG
var theArray = [1, 2, 3];
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log("Results:", results); // E.g., using them, returning them, etc.

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

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

Таким образом, если у вас есть массив (или какой-то список) и вы хотите выполнять асинхронные операции для каждой записи, у вас есть два варианта: выполнять операции параллельно (с наложением) или последовательно (одна за другой в последовательности).

Параллельно

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

var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

Пример:

var theArray = [1, 2, 3];
var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(Мы могли бы покончить с этим expectingи просто использовать results.length === theArray.length, но это оставляет нас открытыми для возможности, которая theArrayизменяется, пока звонки ожидают ...)

Обратите внимание, как мы используем indexfrom forEachдля сохранения результата в resultsтой же позиции, что и запись, к которой он относится, даже если результаты поступают не по порядку (поскольку асинхронные вызовы не обязательно завершаются в том порядке, в котором они были запущены).

Но что, если вам нужно вернуть эти результаты из функции? Как указали другие ответы, вы не можете; вам нужно, чтобы ваша функция принимала и вызывала обратный вызов (или возвращала обещание ). Вот версия обратного вызова:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

Пример:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

Или вот версия, возвращающая Promiseвместо:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

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

Пример:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(Или, альтернативно, вы можете создать оболочку, doSomethingAsyncкоторая возвращает обещание, а затем сделать следующее ...)

Если doSomethingAsyncдает вам обещание , вы можете использовать Promise.all:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(function(entry) {
        return doSomethingAsync(entry);
    }));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Если вы знаете, что doSomethingAsyncбудет игнорироваться второй и третий аргумент, вы можете просто передать его напрямую map( mapвызывает его обратный вызов с тремя аргументами, но большинство людей используют только первый большую часть времени):

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Пример:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

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

Серии

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

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

(Поскольку мы выполняем эту работу последовательно, мы можем просто использовать ее, results.push(result)поскольку знаем, что не получим результаты не в порядке. В приведенном выше results[index] = result;примере мы могли бы использовать , но в некоторых из следующих примеров у нас нет индекса использовать.)

Пример:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(Или, опять же, создайте обертку, doSomethingAsyncкоторая даст вам обещание и сделайте следующее ...)

Если doSomethingAsyncвы получите Обещание, если вы можете использовать синтаксис ES2017 + (возможно, с помощью транспилятора, такого как Babel ), вы можете использовать asyncфункцию с for-ofи await:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

Пример:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

Если вы не можете использовать синтаксис ES2017 + (пока), вы можете использовать вариант с шаблоном «Promise Reduce» (это более сложно, чем обычное сокращение Promise, потому что мы не передаем результат из одного в другое, а вместо этого собирая их результаты в массив):

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Пример:

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

... что менее сложно с функциями ES2015 + стрелка :

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

Пример:

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

Посмотрите на этот пример:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {

    var getJoke = function(){
        return $http.get('http://api.icndb.com/jokes/random').then(function(res){
            return res.data.value;  
        });
    }

    getJoke().then(function(res) {
        console.log(res.joke);
    });
});

Как вы видите getJoke, возвращение разрешенного обещания (оно разрешается при возврате res.data.value). Поэтому вы ждете, пока запрос $ http.get не будет выполнен, а затем будет выполнен console.log (res.joke) (как обычный асинхронный поток).

Это плнкр:

http://embed.plnkr.co/XlNR7HpCaIhJxskMJfSg/

ES6 способ (асинхронно - жду)

(function(){
  async function getJoke(){
    let response = await fetch('http://api.icndb.com/jokes/random');
    let data = await response.json();
    return data.value;
  }

  getJoke().then((joke) => {
    console.log(joke);
  });
})();

Это одно из мест, где два способа привязки данных или концепция хранения, которые используются во многих новых JavaScript-фреймворках, будут отлично работать для вас ...

Так что, если вы используете Angular, React или любые другие фреймворки, которые используют два способа привязки данных или концепцию хранения, эта проблема просто решается для вас, так что, проще говоря, ваш результат находится undefinedна первом этапе, поэтому вы получили его result = undefinedдо того, как получите данные, а затем, как только вы получите результат, он будет обновлен и будет присвоен новое значение, ответ на ваш вызов Ajax ...

Но как вы можете сделать это в чистом javascript или jQuery, например, как вы задали в этом вопросе?

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

Например, в вашем случае, когда вы используете jQuery , вы можете сделать что-то вроде этого:

$(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); //after we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); //fooDone has the data and console.log it
    };

    foo(); //call happens here
});

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

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

Давайте начнем с простой функции JavaScript:

function foo(){
// do something 
 return 'wohoo';
}

let bar = foo(); // bar is 'wohoo' here

Это простой синхронный вызов функции (где каждая строка кода «заканчивается своей работой» перед следующей последовательной), и результат такой же, как и ожидалось.

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

function foo(){
 setTimeout( ()=>{
   return 'wohoo';
  }, 1000 )
}

let bar = foo() // bar is undefined here

Итак, вы идете, эта задержка просто сломала функциональность, которую мы ожидали! Но что именно произошло? Ну, это на самом деле довольно логично, если вы посмотрите на код. foo()после выполнения функция ничего не возвращает (таким образом, возвращается значение undefined), но она запускает таймер, который выполняет функцию через 1 с, чтобы вернуть 'wohoo'. Но, как вы можете видеть, значение, назначенное для bar, является немедленно возвращаемым материалом из foo (), который является ничем, то есть просто undefined.

Итак, как нам решить эту проблему?

Давайте попросим нашу функцию для ОБЕЩАНИЯ . Обещание действительно о том, что оно означает: это означает, что функция гарантирует, что вы обеспечите любой вывод, который она получит в будущем. Итак, давайте посмотрим на это в действии для нашей маленькой проблемы выше:

function foo(){
   return new Promise( (resolve, reject) => { // I want foo() to PROMISE me something
    setTimeout ( function(){ 
      // promise is RESOLVED , when execution reaches this line of code
       resolve('wohoo')// After 1 second, RESOLVE the promise with value 'wohoo'
    }, 1000 )
  })
}

let bar ; 
foo().then( res => {
 bar = res;
 console.log(bar) // will print 'wohoo'
});

Таким образом, сводка заключается в том, что - для решения асинхронных функций, таких как вызовы на основе ajax и т. Д., Вы можете использовать обещание для resolveзначения (которое вы намереваетесь вернуть). Таким образом, короче говоря, вы разрешаете значение, а не возвращаете его в асинхронных функциях.

ОБНОВЛЕНИЕ (обещания с асинхронным ожиданием)

Помимо использования then/catchдля работы с обещаниями, существует еще один подход. Идея состоит в том, чтобы распознать асинхронную функцию и затем дождаться разрешения обещаний , прежде чем перейти к следующей строке кода. Это все еще только promisesпод капотом, но с другим синтаксическим подходом. Чтобы прояснить ситуацию, вы можете найти сравнение ниже:

затем / поймать версию:

function saveUsers(){
     getUsers()
      .then(users => {
         saveSomewhere(users);
      })
      .catch(err => {
          console.error(err);
       })
 }

версия async / await:

  async function saveUsers(){
     try{
        let users = await getUsers()
        saveSomewhere(users);
     }
     catch(err){
        console.error(err);
     }
  }

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

Вот пример того же:

var async = require("async");

// This wires up result back to the caller
var result = {};
var asyncTasks = [];
asyncTasks.push(function(_callback){
    // some asynchronous operation
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;
            _callback();
        }
    });
});

async.parallel(asyncTasks, function(){
    // result is available after performing asynchronous operation
    console.log(result)
    console.log('Done');
});

Я использую resultобъект для хранения значения во время асинхронной операции. Это позволяет результату быть доступным даже после асинхронного задания.

Я часто использую этот подход. Мне было бы интересно узнать, насколько хорошо работает этот подход, когда речь идет о передаче результата через последовательные модули.

Несмотря на то, что обещания и обратные вызовы работают хорошо во многих ситуациях, в тылу трудно выразить что-то вроде:

if (!name) {
  name = async1();
}
async2(name);

Вы бы в конечном итоге пройти async1; проверьте, nameне определено ли или нет, и соответственно вызовите обратный вызов.

async1(name, callback) {
  if (name)
    callback(name)
  else {
    doSomething(callback)
  }
}

async1(name, async2)

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

Fibers помогает в решении проблемы.

var Fiber = require('fibers')

function async1(container) {
  var current = Fiber.current
  var result
  doSomething(function(name) {
    result = name
    fiber.run()
  })
  Fiber.yield()
  return result
}

Fiber(function() {
  var name
  if (!name) {
    name = async1()
  }
  async2(name)
  // Make any number of async calls from here
}

Вы можете оформить заказ здесь .

В следующем примере, который я написал, показано, как

• Обрабатывать асинхронные HTTP-вызовы;
• Дождаться ответа от каждого вызова API;
• Используйте шаблон Promise ;
• Используйте шаблон Promise.all для объединения нескольких HTTP-вызовов;

Этот рабочий пример самодостаточен. Он определит простой объект запроса, который использует XMLHttpRequestобъект окна для выполнения вызовов. Он определит простую функцию, которая будет ждать выполнения обещаний.

Контекст. Пример запрашивает конечную точку Spotify Web API для поиска playlistобъектов для заданного набора строк запроса:

[
 "search?type=playlist&q=%22doom%20metal%22",
 "search?type=playlist&q=Adele"
]

Для каждого элемента новое Promise будет запускать блок - ExecutionBlockанализировать результат, планировать новый набор обещаний на основе массива результатов, который представляет собой список userобъектов Spotify, и выполнять новый HTTP-вызов в ExecutionProfileBlockасинхронном режиме.

Затем вы можете увидеть вложенную структуру Promise, которая позволяет создавать множественные и полностью асинхронные вложенные HTTP-вызовы, а также объединять результаты каждого подмножества вызовов Promise.all.

ПРИМЕЧАНИЕ. Для последних searchAPI Spotify потребуется указать маркер доступа в заголовках запроса:

-H "Authorization: Bearer {your access token}" 

Итак, чтобы запустить следующий пример, вам нужно поместить свой токен доступа в заголовки запроса:

var spotifyAccessToken = "YourSpotifyAccessToken";
var console = {
    log: function(s) {
        document.getElementById("console").innerHTML += s + "<br/>"
    }
}

// Simple XMLHttpRequest
// based on https://davidwalsh.name/xmlhttprequest
SimpleRequest = {
    call: function(what, response) {
        var request;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // Internet Explorer
            try {
                request = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (e) {
                try {
                  request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {}
            }
        }

        // State changes
        request.onreadystatechange = function() {
            if (request.readyState === 4) { // Done
                if (request.status === 200) { // Complete
                    response(request.responseText)
                }
                else
                    response();
            }
        }
        request.open('GET', what, true);
        request.setRequestHeader("Authorization", "Bearer " + spotifyAccessToken);
        request.send(null);
    }
}

//PromiseAll
var promiseAll = function(items, block, done, fail) {
    var self = this;
    var promises = [],
                   index = 0;
    items.forEach(function(item) {
        promises.push(function(item, i) {
            return new Promise(function(resolve, reject) {
                if (block) {
                    block.apply(this, [item, index, resolve, reject]);
                }
            });
        }(item, ++index))
    });
    Promise.all(promises).then(function AcceptHandler(results) {
        if (done) done(results);
    }, function ErrorHandler(error) {
        if (fail) fail(error);
    });
}; //promiseAll

// LP: deferred execution block
var ExecutionBlock = function(item, index, resolve, reject) {
    var url = "https://api.spotify.com/v1/"
    url += item;
    console.log( url )
    SimpleRequest.call(url, function(result) {
        if (result) {

            var profileUrls = JSON.parse(result).playlists.items.map(function(item, index) {
                return item.owner.href;
            })
            resolve(profileUrls);
        }
        else {
            reject(new Error("call error"));
        }
    })
}

arr = [
    "search?type=playlist&q=%22doom%20metal%22",
    "search?type=playlist&q=Adele"
]

promiseAll(arr, function(item, index, resolve, reject) {
    console.log("Making request [" + index + "]")
    ExecutionBlock(item, index, resolve, reject);
}, function(results) { // Aggregated results

    console.log("All profiles received " + results.length);
    //console.log(JSON.stringify(results[0], null, 2));

    ///// promiseall again

    var ExecutionProfileBlock = function(item, index, resolve, reject) {
        SimpleRequest.call(item, function(result) {
            if (result) {
                var obj = JSON.parse(result);
                resolve({
                    name: obj.display_name,
                    followers: obj.followers.total,
                    url: obj.href
                });
            } //result
        })
    } //ExecutionProfileBlock

    promiseAll(results[0], function(item, index, resolve, reject) {
        //console.log("Making request [" + index + "] " + item)
        ExecutionProfileBlock(item, index, resolve, reject);
    }, function(results) { // aggregated results
        console.log("All response received " + results.length);
        console.log(JSON.stringify(results, null, 2));
    }

    , function(error) { // Error
        console.log(error);
    })

    /////

  },
  function(error) { // Error
      console.log(error);
  });

<div id="console" />

Я подробно обсудил это решение здесь .

Короткий ответ: вы должны реализовать обратный вызов, например:

function callback(response) {
    // Here you can do what ever you want with the response object.
    console.log(response);
}

$.ajax({
    url: "...",
    success: callback
});

Ответ на 2017 год: теперь вы можете делать именно то, что вы хотите, в каждом текущем браузере и узле

Это довольно просто:

• Вернуть обещание
• Используйте «ждать» , который сообщит JavaScript, чтобы он ожидал, что обещание будет преобразовано в значение (например, HTTP-ответ)
• Добавьте ключевое слово async в родительскую функцию

Вот рабочая версия вашего кода:

(async function(){

var response = await superagent.get('...')
console.log(response)

})()

await поддерживается во всех текущих браузерах и узле 8

Js однопоточный.

Браузер можно разделить на три части:

1) Event Loop

2) Веб-API

3) Очередь событий

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

Теперь давайте подумаем, что мы поместили две функции в очередь: одна предназначена для получения данных с сервера, а другая использует эти данные. Сначала мы поместили функцию serverRequest () в очередь, а затем функцию utiliseData (). Функция serverRequest входит в цикл обработки событий и выполняет вызов к серверу, так как мы никогда не знаем, сколько времени потребуется для получения данных с сервера, поэтому ожидается, что этот процесс займет время, и поэтому мы заняты циклом обработки событий, таким образом, подвисая нашу страницу. API вступает в роль, он берет эту функцию из цикла событий и имеет дело с тем, что сервер делает цикл событий свободным, чтобы мы могли выполнить следующую функцию из очереди. Следующая функция в очереди - это utiliseData (), который идет в цикле, но из-за отсутствия доступных данных он идет растрата и выполнение следующей функции продолжается до конца очереди (это называется асинхронным вызовом, т.е. мы можем делать что-то еще, пока не получим данные)

Предположим, что у нашей функции serverRequest () есть код возврата в коде, когда мы получаем данные из серверного веб-API и помещаем их в очередь в конце очереди. Поскольку он помещается в конец очереди, мы не можем использовать его данные, так как в нашей очереди не осталось функции для использования этих данных. Таким образом, невозможно вернуть что-либо из Async Call.

Таким образом, решением этого является обратный вызов или обещание .

Изображение из одного из ответов здесь, Правильно объясняет использование обратного вызова ... Мы передаем нашу функцию (функцию, использующую данные, возвращенные с сервера) функции, вызывающей сервер.

 function doAjax(callbackFunc, method, url) {
  var xmlHttpReq = new XMLHttpRequest();
  xmlHttpReq.open(method, url);
  xmlHttpReq.onreadystatechange = function() {

      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
        callbackFunc(xmlHttpReq.responseText);
      }


  }
  xmlHttpReq.send(null);

}

В моем коде это называется

function loadMyJson(categoryValue){
  if(categoryValue==="veg")
  doAjax(print,"GET","http://localhost:3004/vegetables");
  else if(categoryValue==="fruits")
  doAjax(print,"GET","http://localhost:3004/fruits");
  else 
  console.log("Data not found");
}

Javscript.info обратный вызов

Вы можете использовать эту пользовательскую библиотеку (написанную с помощью Promise) для удаленного вызова.

function $http(apiConfig) {
    return new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open(apiConfig.method, apiConfig.url);
        client.send();
        client.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                // Performs the function "resolve" when this.status is equal to 2xx.
                // Your logic here.
                resolve(this.response);
            }
            else {
                // Performs the function "reject" when this.status is different than 2xx.
                reject(this.statusText);
            }
        };
        client.onerror = function () {
            reject(this.statusText);
        };
    });
}

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

$http({
    method: 'get',
    url: 'google.com'
}).then(function(response) {
    console.log(response);
}, function(error) {
    console.log(error)
});

Другое решение - выполнить код через последовательного исполнителя nsynjs .

Если основная функция обещана

nsynjs будет оценивать все обещания последовательно и помещать результат обещания в dataсвойство:

function synchronousCode() {

    var getURL = function(url) {
        return window.fetch(url).data.text().data;
    };
    
    var url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js';
    console.log('received bytes:',getURL(url).length);
    
};

nsynjs.run(synchronousCode,{},function(){
    console.log('synchronousCode done');
});

<script src="https://rawgit.com/amaksr/nsynjs/master/nsynjs.js"></script>

Если основная функция не обещана

Шаг 1. Оберните функцию с обратным вызовом в оболочку с поддержкой nsynjs (если у нее обещанная версия, вы можете пропустить этот шаг):

var ajaxGet = function (ctx,url) {
    var res = {};
    var ex;
    $.ajax(url)
    .done(function (data) {
        res.data = data;
    })
    .fail(function(e) {
        ex = e;
    })
    .always(function() {
        ctx.resume(ex);
    });
    return res;
};
ajaxGet.nsynjsHasCallback = true;