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


5512

У меня есть функция, 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`.

Ответы:


5704

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

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

Проблема

В 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 по своей природе всегда асинхронен (еще одна причина, чтобы даже не рассматривать эту опцию).


74
@Pommy: Если вы хотите использовать jQuery, вы должны включить его. Пожалуйста, обратитесь к docs.jquery.com/Tutorials:Getting_Started_with_jQuery .
Феликс Клинг

11
В решении 1, sub jQuery, я не мог понять эту строку: If you use any other jQuery AJAX method, such as $.get, $.getJSON, etc., you have them to $.ajax.(Да, я понимаю, что мой ник в этом случае немного ироничен)
cssyphus

32
@ gibberish: Мммм, я не знаю, как это можно сделать яснее. Вы видите, как fooвызывается и передается функция ( foo(function(result) {....});)? resultиспользуется внутри этой функции и является ответом на запрос Ajax. Чтобы обратиться к этой функции, первый параметр foo вызывается callbackи назначается successвместо анонимной функции. Итак, $.ajaxпозвоним, callbackкогда запрос был успешным. Я попытался объяснить это немного больше.
Феликс Клинг

43
Чат для этого вопроса мертв, поэтому я не уверен, где предлагать изложенные изменения, но я предлагаю: 1) Измените синхронную часть на простое обсуждение того, почему это плохо, без примера кода, как это сделать. 2) Удалите / объедините примеры обратного вызова, чтобы показать только более гибкий подход Deferred, который, я думаю, также может быть немного проще для тех, кто изучает Javascript.
Крис Москини

14
@ Джесси: Я думаю, что вы не поняли эту часть ответа. Вы не можете использовать, $.getJSONесли хотите, чтобы запрос Ajax был синхронным. Однако вы не должны хотеть, чтобы запрос был синхронным, так что это не применяется. Вы должны использовать обратные вызовы или обещания для обработки ответа, как это объяснялось ранее в ответе.
Феликс Клинг

1071

Если вы не используете 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.


20
«синхронные запросы блокируют выполнение кода и могут привести к утечке памяти и событий», как синхронный запрос может пропускать память?
Мэтью G

10
@ MatthewG Я добавил в этот вопрос награду , я посмотрю, что я могу выловить. Тем временем я убираю цитату из ответа.
Бенджамин Грюнбаум

17
Просто для справки, XHR 2 позволяет нам использовать onloadобработчик, который срабатывает только когда readyStateесть 4. Конечно, это не поддерживается в IE8. (iirc, возможно, понадобится подтверждение.)
Florian Margaine

9
Ваше объяснение того, как передать анонимную функцию в качестве обратного вызова, является верным, но вводит в заблуждение. Пример var bar = foo (); просит определить переменную, в то время как вы предложили foo (functim () {}); не определяет бар
Робби Аверилл

396

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 ... (я добавил простой способ.)


15
Хотя этот ответ хорош (и мы все любим XHR2, и публикация файловых данных и многокомпонентных данных совершенно потрясающая) - это показывает синтаксический сахар для публикации XHR с JavaScript - вы можете поместить это в сообщение в блоге (мне бы это понравилось) или даже в библиотеке (не уверен насчет названия x, ajaxили xhrможет быть лучше :)). Я не вижу, как он обращается, возвращая ответ от вызова AJAX. (кто-то еще может сделать var res = x("url")и не понять, почему это не работает;)). С другой стороны - было бы здорово, если бы вы вернулись cиз метода, чтобы пользователи могли зацепиться errorи т. Д.
Бенджамин Грюнбаум

25
2.ajax is meant to be async.. so NO var res=x('url')..Вот и весь смысл этого вопроса и ответов :)
Бенджамин Грюнбаум

3
почему в функциях есть параметр 'c', если в первой строке вы перезаписываете любое значение, которое оно имело? я что-то пропустил?
Брайан Х.

2
Вы можете использовать параметры в качестве заполнителя, чтобы избежать многократного написания "var"
cocco

11
@cocco Итак, вы написали вводящий в заблуждение нечитаемый код в SO- ответе , чтобы сохранить несколько нажатий клавиш? Пожалуйста, не делай этого.
камень

316

Если вы используете обещания, этот ответ для вас.

Это означает 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
}

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


Это должен быть принятый ответ. +1 за асинхронность / ожидание (хотя мы не должны return await data.json();?)
Льюис Донован

247

Вы используете 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);
    }
});

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


13
Этот ответ полностью семантический ... ваш метод успеха - это просто обратный вызов внутри обратного вызова. Вы могли бы просто иметь, success: handleDataи это будет работать.
Жак ジ ャ ッ ク

5
А что если вы захотите вернуть «responseData» вне «handleData» ... :) ... как вы это сделаете ...? ... потому что простое возвращение вернет его к "успешному" обратному вызову ajax ... а не вне "handleData" ...
pesho hristov

@Jacques & @pesho hristov Вы пропустили этот момент. Обработчик отправки - это не successметод, а окружающая область $.ajax.
травник

@travnik Я не пропустил это. Если вы возьмете содержимое handleData и поместите его в метод успеха, оно будет действовать точно так же ...
Жак ジ ャ ッ ク

234

Самое простое решение - создать функцию 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);    
}); 

3
Я не знаю, кто проголосовал против. Но это работа, которая действительно сработала, я использовал этот подход для создания целого приложения. Jquery.ajax не возвращает данные, поэтому лучше использовать вышеуказанный подход. Если это не так, пожалуйста, объясните и предложите лучший способ сделать это.
Hemant Bavle

11
Извините, я забыл оставить комментарий (я обычно делаю!). Я понизил это. Падение голосов не указывает на фактическую правильность или отсутствие, они указывают на полезность в контексте или отсутствие. Я не нахожу ваш ответ полезным, учитывая Феликса, который уже объясняет это только гораздо более подробно. С другой стороны, почему вы должны уточнить ответ, если это JSON?
Бенджамин Грюнбаум

5
хорошо .. @ Benjamin я использовал stringify, чтобы преобразовать объект JSON в строку. И спасибо за разъяснение вашей точки зрения. Будем иметь в виду, чтобы опубликовать более сложные ответы.
Хемант Бавл

А что если вы захотите вернуть «responseObj» вне «successCallback» ... :) ... как вы это сделаете ...? ... потому что простое возвращение вернет его к "успешному" обратному вызову ajax ... а не вне "successCallback" ...
Пешо Христов

221

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

введите описание изображения здесь


32
Изображение стоит тысячи слов , Лицо A - попросить человека B сообщить детали, чтобы починить его машину, в свою очередь Лицо B - выполняет Ajax Call и ждет ответа от сервера для деталей ремонта автомобиля , когда ответ получен, функция Ajax Success вызывает человека Функция B передает ответ в качестве аргумента, лицо A получает ответ.
Шайют

10
Было бы здорово, если бы вы добавили строки кода с каждым изображением для иллюстрации концепции.
Хасан Бэйг

1
Тем временем парень с машиной застрял на обочине дороги. Он требует, чтобы машина была исправлена, прежде чем продолжить. Теперь он один на обочине дороги в ожидании ... Скорее, он будет разговаривать по телефону, ожидая изменения статуса, но механик не сделает этого ... Механик сказал, что он должен выполнить свою работу и не может просто болтаться по телефону. Механик пообещал, что перезвонит ему, как только сможет. Примерно через 4 часа парень сдается и звонит Убер. - Пример тайм-аута.
barrypicker

@barrypicker :-D Отлично!
Йоханнес Фаренкруг,

159

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 , если вы хотите его использовать, вам может понадобиться плагин для этого.

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


15
Это не объясняет, каким образом обещания решат эту проблему вообще.
Бенджамин Грюнбаум

4
Методы jQuery и fetch также возвращают обещания. Я бы предложил пересмотреть ваш ответ. Хотя jQuery не совсем то же самое (тогда есть, но поймать не так).
Tracker1

153

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

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

Пример:

Причина, по которой это не работает, заключается в том, что обратные вызовы из 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
        }
    });
});

Пример:

(Мы могли бы покончить с этим 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);
});

Пример:

Или вот версия, возвращающая 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отклонение обещания, когда получили ошибку.)

Пример:

(Или, альтернативно, вы можете создать оболочку, 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);
});

Пример:

Обратите внимание, что 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;примере мы могли бы использовать , но в некоторых из следующих примеров у нас нет индекса использовать.)

Пример:

(Или, опять же, создайте обертку, 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);
});

Пример:

Если вы не можете использовать синтаксис 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);
});

Пример:

... что менее сложно с функциями 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);
});

Пример:


1
Не могли бы вы объяснить, как работает if (--expecting === 0)часть кода, пожалуйста? Версия обратного вызова вашего решения отлично работает для меня, я просто не понимаю, как с помощью этого заявления вы проверяете количество выполненных ответов. Ценю это просто отсутствие знаний с моей стороны. Есть ли альтернативный способ написания чека?
Сара

@Sarah: expectingначинается со значения array.length, то есть сколько запросов мы собираемся сделать. Мы знаем, что обратный вызов не будет вызван, пока все эти запросы не будут запущены. В обратном вызове if (--expecting === 0)делает это: 1. Уменьшает expecting(мы получили ответ, поэтому мы ожидаем на один ответ меньше), и если значение после уменьшения равно 0 (мы не ожидаем больше ответов), мы сделанный!
TJ Crowder

1
@PatrickRoberts - Спасибо! Да, ошибка копирования и вставки, этот второй аргумент был полностью проигнорирован в этом примере (это единственная причина, по которой он не потерпел неудачу, поскольку, как вы указали, resultsне существовало). :-) Починил это.
Ти Джей Краудер

111

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

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

107

Это одно из мест, где два способа привязки данных или концепция хранения, которые используются во многих новых 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
});

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


Это нормально в глобальной области видимости, но в некотором контексте модуля вы, вероятно, хотите обеспечить правильный контекст для обратного вызова, например$.ajax({url: "api/data", success: fooDone.bind(this)});
steve.sims

8
Это на самом деле неверно, так как React является односторонней привязкой данных
Мэтью Брент

@ MatthewBrent вы не ошибаетесь, но не правы, реквизиты React являются объектами, и если они изменяются, они изменяются во всем приложении, но разработчик React не рекомендует их использовать ...
Alireza

98

Это очень распространенная проблема, с которой мы сталкиваемся, борясь с «загадками» 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);
     }
  }

это все еще считается лучшим способом вернуть значение из обещания или async / await?
Edwardsmarkf

3
@edwardsmarkf Лично я не думаю, что есть лучший способ как таковой. Я использую обещания с then / catch, async / await, а также генераторы для асинхронных частей моего кода. Это во многом зависит от контекста использования.
Аниш К.

96

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

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

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объект для хранения значения во время асинхронной операции. Это позволяет результату быть доступным даже после асинхронного задания.

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


9
Здесь нет ничего особенного в использовании объекта. Это также сработало бы, если бы вы назначили ему ответ напрямую result. Это работает, потому что вы читаете переменную после завершения асинхронной функции.
Феликс Клинг

85

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

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
}

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


1
@recurf - это не мой проект. Вы можете попробовать использовать их трекер.
rohithpr

1
это похоже на функции генератора? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… *
Emanegux

1
Это все еще актуально?
Алуан Хаддад

Вы можете использовать, async-awaitесли вы используете некоторые из новейших версий узла. Если кто-то застрял с более старыми версиями, он может использовать этот метод.
rohithpr

83

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

  • Обрабатывать асинхронные 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" />

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


80

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

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

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

78

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

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

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

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

(async function(){

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

})()

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


7
К сожалению, это работает только с функциями, которые возвращают обещания - например, это не работает с API Node.js, который использует обратные вызовы. И я бы не рекомендовал использовать его без Babel, потому что не все используют «текущие браузеры».
Михал Перлаковский

2
@ Узел 8 MichałPerłakowski включает в себя nodejs.org/api/util.html#util_util_promisify_original, который можно использовать для получения обещаний API-интерфейса node.js. Есть ли у вас время и деньги для поддержки устаревших браузеров, очевидно, зависит от вашей ситуации.
mikemaccana

IE 11 все еще является текущим браузером в 2018 году, к сожалению, и он не поддерживаетawait/async
Хуан Мендес,

IE11 не является текущим браузером. Он был выпущен 5 лет назад, его доля на мировом рынке составляет 2,5% в зависимости от caniuse, и если кто-то не удвоит ваш бюджет, чтобы игнорировать все текущие технологии, то это не стоит времени большинства людей.
mikemaccana

76

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 обратный вызов


68

Вы можете использовать эту пользовательскую библиотеку (написанную с помощью 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)
});

67

Другое решение - выполнить код через последовательного исполнителя 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;

Шаг 2. Ввести синхронную логику в функцию:

function process() {
    console.log('got data:', ajaxGet(nsynjsCtx, "data/file1.json").data);
}

Шаг 3. Запустите функцию синхронно через nsynjs:

nsynjs.run(process,this,function () {
    console.log("synchronous function finished");
});

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

Дополнительные примеры здесь: https://github.com/amaksr/nsynjs/tree/master/examples


2
Это интересно. Мне нравится, как он позволяет кодировать асинхронные вызовы так, как вы это делаете на других языках. Но технически это не настоящий JavaScript?
Дж Моррис

41

ECMAScript 6 имеет «генераторы», которые позволяют легко программировать в асинхронном стиле.

function* myGenerator() {
    const callback = yield;
    let [response] = yield $.ajax("https://stackoverflow.com", {complete: callback});
    console.log("response is:", response);

    // examples of other things you can do
    yield setTimeout(callback, 1000);
    console.log("it delayed for 1000ms");
    while (response.statusText === "error") {
        [response] = yield* anotherGenerator();
    }
}

Для запуска приведенного выше кода вы делаете это:

const gen = myGenerator(); // Create generator
gen.next(); // Start it
gen.next((...args) => gen.next([...args])); // Set its callback function

Если вам нужно ориентироваться на браузеры, которые не поддерживают ES6, вы можете запустить код через Babel или closure-compiler для генерации ECMAScript 5.

Обратный вызов ...argsупакован в массив и деструктурирован, когда вы читаете их, чтобы шаблон мог справиться с обратными вызовами, которые имеют несколько аргументов. Например, с узлом fs :

const [err, data] = yield fs.readFile(filePath, "utf-8", callback);

39

Вот несколько подходов для работы с асинхронными запросами:

  1. Обозреватель Обещание объекта
  2. Q - библиотека обещаний для JavaScript
  3. A + Promises.js
  4. JQuery отложено
  5. API XMLHttpRequest
  6. Использование концепции обратного вызова - как реализация в первом ответе

Пример: отложенная реализация jQuery для работы с несколькими запросами

var App = App || {};

App = {
    getDataFromServer: function(){

      var self = this,
                 deferred = $.Deferred(),
                 requests = [];

      requests.push($.getJSON('request/ajax/url/1'));
      requests.push($.getJSON('request/ajax/url/2'));

      $.when.apply(jQuery, requests).done(function(xhrResponse) {
        return deferred.resolve(xhrResponse.result);
      });
      return deferred;
    },

    init: function(){

        this.getDataFromServer().done(_.bind(function(resp1, resp2) {

           // Do the operations which you wanted to do when you
           // get a response from Ajax, for example, log response.
        }, this));
    }
};
App.init();


38

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

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

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

var milk = order_milk();
put_in_coffee(milk);

Потому что JS не имеет возможности узнать , что нужно ждать для order_milkдо конца перед выполнением put_in_coffee. Другими словами, он не знает, что order_milkявляется асинхронным - это то, что не приведет к молоку до некоторого будущего времени. JS и другие декларативные языки выполняют один оператор за другим без ожидания.

Классический подход JS к этой проблеме, использующий преимущество того факта, что JS поддерживает функции как объекты первого класса, которые могут быть переданы, состоит в том, чтобы передать функцию в качестве параметра асинхронному запросу, который он затем вызовет после завершения. его задача когда-нибудь в будущем. Это подход "обратного вызова". Это выглядит так:

order_milk(put_in_coffee);

order_milkначинает, приказывает молоко, затем, когда и только когда оно прибывает, оно вызывает put_in_coffee.

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

order_milk(function(milk) { put_in_coffee(milk, drink_coffee); }

где я передаю put_in_coffeeи молоко, чтобы вставить его, и также действие ( drink_coffee), которое нужно выполнить после того, как молоко было введено. Такой код становится трудно писать, читать и отлаживать.

В этом случае мы могли бы переписать код в вопросе как:

var answer;
$.ajax('/foo.json') . done(function(response) {
  callback(response.data);
});

function callback(data) {
  console.log(data);
}

Введите обещания

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

В случае нашего молока и кофе мы order_milkпланируем вернуть обещание на прибытие молока, а затем указать put_in_coffeeв качестве thenдействия следующее:

order_milk() . then(put_in_coffee)

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

order_milk() . then(put_in_coffee) . then(drink_coffee)

Давайте применим обещания к вашей конкретной проблеме. Мы обернем нашу логику запроса внутри функции, которая возвращает обещание:

function get_data() {
  return $.ajax('/foo.json');
}

На самом деле, все, что мы сделали, это добавили returnк вызову $.ajax. Это работает, потому что jQuery $.ajaxуже возвращает что-то вроде обещания. (На практике, не вдаваясь в подробности, мы бы предпочли обернуть этот вызов так, чтобы он возвращал реальное обещание, или использовать какую-то альтернативу $.ajaxэтому.) Теперь, если мы хотим загрузить файл и дождаться его завершения и затем сделать что-то, мы можем просто сказать,

get_data() . then(do_something)

например,

get_data() . 
  then(function(data) { console.log(data); });

При использовании обещаний мы в конечном итоге передаем множество функций then, поэтому часто полезно использовать более компактные функции стрелок в стиле ES6:

get_data() . 
  then(data => console.log(data));

asyncключевое слово

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

a();
b();

но если aасинхронный, с обещаниями мы должны написать

a() . then(b);

Выше мы говорили: «JS не может знать, что ему нужно дождаться завершения первого вызова, прежде чем он выполнит второй». Разве не было бы хорошо, если бы был какой-то способ сказать JS об этом? Оказывается, есть awaitключевое слово, используемое внутри специального типа функции, называемой «асинхронная» функция. Эта функция является частью будущей версии ES, но она уже доступна в таких транспортерах, как Babel, с правильными настройками. Это позволяет нам просто написать

async function morning_routine() {
  var milk   = await order_milk();
  var coffee = await put_in_coffee(milk);
  await drink(coffee);
}

В вашем случае вы сможете написать что-то вроде

async function foo() {
  data = await get_data();
  console.log(data);
}

37

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

В этой теме было дано несколько решений. Возможно, самый простой способ - передать объект foo()методу и сохранить результаты в элементе этого объекта после завершения асинхронного вызова.

function foo(result) {
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;   // Store the async result
        }
    });
}

var result = { response: null };   // Object to hold the async result
foo(result);                       // Returns before the async completes

Обратите внимание, что вызов по- foo()прежнему не вернет ничего полезного. Однако результат асинхронного вызова теперь будет храниться в result.response.


14
Хотя это работает, на самом деле это не лучше, чем присвоение глобальной переменной.
Феликс Клинг

36

Используйте callback()функцию внутри foo()успеха. Попробуй таким образом. Это просто и легко понять.  

var lat = "";
var lon = "";
function callback(data) {
    lat = data.lat;
    lon = data.lon;
}
function getLoc() {
    var url = "http://ip-api.com/json"
    $.getJSON(url, function(data) {
        callback(data);
    });
}

getLoc();

29

Вопрос был:

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

что МОЖЕТ быть интерпретировано как:

Как заставить асинхронный код выглядеть синхронно ?

Решение будет заключаться в том, чтобы избежать обратных вызовов и использовать комбинацию Promises и async / await .

Я хотел бы привести пример запроса Ajax.

(Хотя он может быть написан на Javascript, я предпочитаю писать его на Python и компилировать в Javascript с использованием Transcrypt . Это будет достаточно ясно.)

Давайте сначала включим использование JQuery, чтобы оно было $доступно как S:

__pragma__ ('alias', 'S', '$')

Определите функцию, которая возвращает Promise , в данном случае Ajax-вызов:

def read(url: str):
    deferred = S.Deferred()
    S.ajax({'type': "POST", 'url': url, 'data': { },
        'success': lambda d: deferred.resolve(d),
        'error': lambda e: deferred.reject(e)
    })
    return deferred.promise()

Используйте асинхронный код, как если бы он был синхронным :

async def readALot():
    try:
        result1 = await read("url_1")
        result2 = await read("url_2")
    except Exception:
        console.warn("Reading a lot failed")

29

Используя Promise

Наиболее совершенным ответом на этот вопрос является использование Promise.

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

Применение

ajax("GET", "/test", "acrive=1").then(function(result) {
    // Code depending on result
})
.catch(function() {
    // An error occurred
});

Но ждать...!

Существует проблема с использованием обещаний!

Почему мы должны использовать наши собственные обещания?

Я использовал это решение некоторое время, пока не выяснил, есть ли ошибка в старых браузерах:

Uncaught ReferenceError: Promise is not defined

Поэтому я решил реализовать свой собственный класс Promise для ES3 для компиляторов ниже js, если он не определен. Просто добавьте этот код перед вашим основным кодом, а затем смело используйте Promise!

if(typeof Promise === "undefined"){
    function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) { 
            throw new TypeError("Cannot call a class as a function"); 
        }
    }
    var Promise = function () {
        function Promise(main) {
            var _this = this;
            _classCallCheck(this, Promise);
            this.value = undefined;
            this.callbacks = [];
            var resolve = function resolve(resolveValue) {
                _this.value = resolveValue;
                _this.triggerCallbacks();
            };
            var reject = function reject(rejectValue) {
                _this.value = rejectValue;
                _this.triggerCallbacks();
            };
            main(resolve, reject);
        }
        Promise.prototype.then = function then(cb) {
            var _this2 = this;
            var next = new Promise(function (resolve) {
                _this2.callbacks.push(function (x) {
                    return resolve(cb(x));
                });
            });
            return next;
        };
        Promise.prototype.catch = function catch_(cb) {
            var _this2 = this;
            var next = new Promise(function (reject) {
                _this2.callbacks.push(function (x) {
                    return reject(cb(x));
                });
            });
            return next;
        };
        Promise.prototype.triggerCallbacks = function triggerCallbacks() {
            var _this3 = this;
            this.callbacks.forEach(function (cb) {
                cb(_this3.value);
            });
        };
        return Promise;
    }();
}

28

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

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            myCallback(response);
        }
    });

    return result;
}

function myCallback(response) {
    // Does something.
}

5
Нет ничего изначально асинхронного в обратных вызовах или JavaScript.
Алуан Хаддад

19

Вместо того, чтобы бросать на вас код, есть две концепции, которые являются ключевыми для понимания того, как JS обрабатывает обратные вызовы и асинхронность. (Это вообще слово?)

Цикл событий и модель параллелизма

Есть три вещи, о которых вам нужно знать; Очередь; цикл событий и стек

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

while (queue.waitForMessage()) {
   queue.processNextMessage();
}

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

 1. call foo.com/api/bar using foobarFunc
 2. Go perform an infinite loop
 ... and so on

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

function foobarFunc (var) {
  console.log(anotherFunction(var));
}

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

Ключевым моментом здесь является порядок исполнения. Это

КОГДА-то собирается бежать

Когда вы делаете вызов с использованием AJAX внешней стороне или запускаете любой асинхронный код (например, setTimeout), Javascript зависит от ответа, прежде чем он сможет продолжить.

Большой вопрос, когда он получит ответ? Ответ - мы не знаем - поэтому цикл обработки событий ожидает, пока это сообщение не скажет «эй, беги меня». Если JS только что ждал этого сообщения синхронно, ваше приложение зависло бы, и оно было бы отстойным. Таким образом, JS продолжает выполнение следующего элемента в очереди, ожидая, когда сообщение будет добавлено в очередь.

Вот почему с асинхронной функциональностью мы используем вещи, называемые обратными вызовами . Это как обещание в буквальном смысле. Как и в обещание вернуть что-то в какой-то момент, jQuery использует специальные обратные вызовы, называемые deffered.done deffered.failи deffered.always(среди других). Вы можете увидеть их все здесь

Итак, вам нужно передать функцию, которую обещают выполнить в какой-то момент, с данными, которые ему передают.

Поскольку обратный вызов не выполняется сразу, но в более позднее время важно передать ссылку на функцию, а не на ее выполнение. так

function foo(bla) {
  console.log(bla)
}

поэтому большую часть времени (но не всегда) , вы будете проходить fooнеfoo()

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


18

Используя ES2017, вы должны иметь это как объявление функции

async function foo() {
    var response = await $.ajax({url: '...'})
    return response;
}

И выполнить это так.

(async function() {
    try {
        var result = await foo()
        console.log(result)
    } catch (e) {}
})()

Или синтаксис обещания

foo().then(response => {
    console.log(response)

}).catch(error => {
    console.log(error)

})

может ли эта вторая функция многократно использоваться?
Zum Dummi

Как вы используете результаты, если oncolse, log называется? Разве все не просто идет к консоли в этот момент?
Кен Ингрэм,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.