Eu tenho uma função fooque faz uma solicitação Ajax. Como posso devolver a resposta foo?

Tentei retornar o valor do successretorno de chamada, além de atribuir a resposta a uma variável local dentro da função e retornar essa, mas nenhuma dessas maneiras realmente retorna a resposta.

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`.

→ Para obter uma explicação mais geral do comportamento assíncrono com exemplos diferentes, consulte Por que minha variável é inalterada depois que a modifico dentro de uma função? - Referência de código assíncrona

→ Se você já entendeu o problema, pule para as possíveis soluções abaixo.

O problema

O Um em Ajax significa assíncrona . Isso significa que o envio da solicitação (ou melhor, o recebimento da resposta) é retirado do fluxo de execução normal. No seu exemplo, $.ajaxretorna imediatamente e a próxima instrução return result;,, é executada antes da função que você passou como successretorno de chamada ser chamada.

Aqui está uma analogia que, esperançosamente, torna mais clara a diferença entre fluxo síncrono e assíncrono:

Síncrono

Imagine que você telefona para um amigo e pede que ele procure algo para você. Embora possa demorar um pouco, você espera no telefone e fica olhando para o espaço, até que seu amigo lhe dê a resposta que você precisava.

O mesmo está acontecendo quando você faz uma chamada de função contendo código "normal":

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

var item = findItem();

// Do something with item
doSomethingElse();

Mesmo que findItemdemore muito tempo para executar, qualquer código que vem depois var item = findItem();precisa esperar até que a função retorne o resultado.

Assíncrono

Você chama seu amigo novamente pelo mesmo motivo. Mas desta vez você diz a ele que está com pressa e ele deve ligar de volta no seu celular. Você desliga, sai de casa e faz o que planeja fazer. Quando seu amigo ligar de volta, você estará lidando com as informações que ele lhe deu.

É exatamente o que está acontecendo quando você faz uma solicitação do Ajax.

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

Em vez de aguardar a resposta, a execução continua imediatamente e a instrução após a execução da chamada do Ajax. Para obter a resposta eventualmente, você fornece uma função a ser chamada assim que a resposta é recebida, um retorno de chamada (observe algo? Ligar de volta ?). Qualquer declaração que vem depois dessa chamada é executada antes da chamada de retorno.

Solução (s)

Adote a natureza assíncrona do JavaScript! Embora certas operações assíncronas forneçam contrapartes síncronas (o mesmo acontece com "Ajax"), geralmente é desencorajado usá-las, especialmente em um contexto de navegador.

Por que isso é ruim, você pergunta?

O JavaScript é executado no segmento da interface do usuário do navegador e qualquer processo de longa duração bloqueará a interface do usuário, deixando de responder. Além disso, há um limite superior no tempo de execução do JavaScript e o navegador perguntará ao usuário se continua ou não a execução.

Tudo isso é uma péssima experiência do usuário. O usuário não poderá saber se tudo está funcionando bem ou não. Além disso, o efeito será pior para usuários com uma conexão lenta.

A seguir, veremos três soluções diferentes, todas construídas umas sobre as outras:

• Promessas comasync/await (ES2017 +, disponível em navegadores mais antigos se você usar um transpiler ou regenerador)
• Retornos de chamada (populares no nó)
• Promessas comthen() (ES2015 +, disponível em navegadores mais antigos se você usar uma das muitas bibliotecas de promessas)

Todos os três estão disponíveis nos navegadores atuais e no nó 7+.

ES2017 +: Promessas com async/await

A versão do ECMAScript lançada em 2017 apresentou suporte no nível de sintaxe para funções assíncronas. Com a ajuda de asynce await, você pode escrever assíncrono em um "estilo síncrono". O código ainda é assíncrono, mas é mais fácil de ler / entender.

async/awaitse baseia em promessas: uma asyncfunção sempre retorna uma promessa. await"desembrulha" uma promessa e resulta no valor com o qual a promessa foi resolvida ou gera um erro se a promessa foi rejeitada.

Importante: Você só pode usar awaitdentro de uma asyncfunção. No momento, o nível superior awaitainda não é suportado; portanto, você pode precisar criar um IIFE assíncrono ( expressão de função chamada imediatamente ) para iniciar um asynccontexto.

Você pode ler mais sobre asynce awaitno MDN.

Aqui está um exemplo que se baseia no atraso acima:

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

Suporte para versões atuais do navegador e do nóasync/await . Você também pode oferecer suporte a ambientes mais antigos, transformando seu código no ES5 com a ajuda do regenerador (ou ferramentas que usam o regenerador, como Babel ).

Permitir que as funções aceitem retornos de chamada

Um retorno de chamada é simplesmente uma função passada para outra função. Essa outra função pode chamar a função passada sempre que estiver pronta. No contexto de um processo assíncrono, o retorno de chamada será chamado sempre que o processo assíncrono for concluído. Normalmente, o resultado é passado para o retorno de chamada.

No exemplo da pergunta, você pode fooaceitar um retorno de chamada e usá-lo como successretorno de chamada. Então, é isso

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

torna-se

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

Aqui nós definimos a função "inline", mas você pode passar qualquer referência de função:

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

foo(myCallback);

foo em si é definido da seguinte forma:

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

callbackirá se referir à função para a qual passamos fooquando a chamamos e simplesmente a passamos para success. Ou seja, uma vez que a solicitação do Ajax for bem-sucedida, $.ajaxchamará callbacke passará a resposta para o retorno de chamada (que pode ser referido result, pois é assim que definimos o retorno de chamada).

Você também pode processar a resposta antes de passá-la para o retorno de chamada:

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

É mais fácil escrever código usando retornos de chamada do que parece. Afinal, o JavaScript no navegador é fortemente orientado a eventos (eventos DOM). Receber a resposta do Ajax nada mais é do que um evento.
Dificuldades podem surgir quando você precisa trabalhar com código de terceiros, mas a maioria dos problemas pode ser resolvida apenas pensando no fluxo do aplicativo.

ES2015 +: Promessas com then ()

A API Promise é um novo recurso do ECMAScript 6 (ES2015), mas já possui um bom suporte ao navegador . Existem também muitas bibliotecas que implementam a API Promises padrão e fornecem métodos adicionais para facilitar o uso e a composição de funções assíncronas (por exemplo, bluebird ).

Promessas são recipientes para valores futuros . Quando a promessa recebe o valor (é resolvido ) ou quando é cancelada ( rejeitada ), notifica todos os seus "ouvintes" que desejam acessar esse valor.

A vantagem sobre os retornos de chamada simples é que eles permitem desacoplar seu código e são mais fáceis de compor.

Aqui está um exemplo simples de usar uma promessa:

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

Aplicados à nossa chamada do Ajax, poderíamos usar promessas como esta:

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

A descrição de todas as vantagens que a promessa oferece está além do escopo desta resposta, mas se você escrever um novo código, considere-o seriamente. Eles fornecem uma ótima abstração e separação do seu código.

Mais informações sobre promessas: rochas HTML5 - Promessas JavaScript

Nota lateral: objetos adiados do jQuery

Objetos adiados são a implementação personalizada de promessas do jQuery (antes da padronização da API da promessa). Eles se comportam quase como promessas, mas expõem uma API ligeiramente diferente.

Todo método Ajax do jQuery já retorna um "objeto adiado" (na verdade, a promessa de um objeto adiado) que você pode retornar da sua função:

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

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

Nota lateral: dicas da promessa

Lembre-se de que promessas e objetos adiados são apenas contêineres para um valor futuro, eles não são o valor em si. Por exemplo, suponha que você tenha o seguinte:

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
}

Este código entende mal os problemas de assincronia acima. Especificamente, $.ajax()não congela o código enquanto verifica a página '/ senha' no servidor - envia uma solicitação ao servidor e, enquanto espera, retorna imediatamente um objeto adiado jQuery Ajax Deferred, não a resposta do servidor. Isso significa que a ifinstrução sempre obterá esse objeto adiado, trate-o como truee continue como se o usuário estivesse logado. Nada bom.

Mas a correção é fácil:

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

Não recomendado: chamadas síncronas "Ajax"

Como mencionei, algumas operações assíncronas (!) Possuem contrapartes síncronas. Eu não defendo o uso deles, mas, por uma questão de integridade, eis como você faria uma chamada síncrona:

Sem jQuery

Se você usar um XMLHTTPRequestobjeto diretamente , passe falsecomo terceiro argumento para .open.

jQuery

Se você usa o jQuery , pode definir a asyncopção para false. Observe que esta opção está obsoleta desde o jQuery 1.8. Você ainda pode usar um successretorno de chamada ou acessar a responseTextpropriedade do objeto jqXHR :

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

Se você usar qualquer outro método jQuery Ajax, como $.get, $.getJSONetc., precisará alterá-lo para $.ajax(já que você só pode passar parâmetros de configuração para $.ajax).

Atenção! Não é possível fazer uma solicitação JSONP síncrona . O JSONP por sua própria natureza é sempre assíncrono (mais um motivo para nem considerar essa opção).

Se você não estiver usando jQuery no seu código, esta resposta é para você

Seu código deve ser algo parecido com isto:

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

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

Felix Kling fez um bom trabalho ao escrever uma resposta para as pessoas que usam o jQuery para AJAX. Decidi fornecer uma alternativa para as pessoas que não o são.

( Observe que, para aqueles que usam a nova fetchAPI, Angular ou promessas, adicionei outra resposta abaixo )

O que você está enfrentando

Este é um breve resumo de "Explicação do problema" da outra resposta, se você não tiver certeza depois de ler isso, leia isso.

O Um em AJAX significa assíncrona . Isso significa que o envio da solicitação (ou melhor, o recebimento da resposta) é retirado do fluxo de execução normal. No seu exemplo, .sendretorna imediatamente e a próxima instrução return result;,, é executada antes da função que você passou como successretorno de chamada ser chamada.

Isso significa que, quando você está retornando, o ouvinte que você definiu ainda não foi executado, o que significa que o valor que você está retornando não foi definido.

Aqui está uma analogia simples

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

(Violino)

O valor aretornado é undefinedporque a a=5peça ainda não foi executada. O AJAX age assim: você retorna o valor antes que o servidor tenha a chance de informar ao seu navegador qual é esse valor.

Uma solução possível para esse problema é codificar de forma reativa , informando ao seu programa o que fazer quando o cálculo for concluído.

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

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

Isso é chamado de CPS . Basicamente, estamos passando getFiveuma ação para executar quando ela é concluída, informando ao nosso código como reagir quando um evento é concluído (como nossa chamada AJAX ou, neste caso, o tempo limite).

O uso seria:

getFive(onComplete);

O que deve alertar "5" para a tela. (Violino) .

Soluções possíveis

Existem basicamente duas maneiras de resolver isso:

1. Torne a chamada AJAX síncrona (vamos chamá-la de SJAX).
2. Reestruture seu código para funcionar corretamente com retornos de chamada.

1. AJAX síncrono - não faça isso !!

Quanto ao AJAX síncrono, não faça isso! A resposta de Felix levanta alguns argumentos convincentes sobre por que é uma má ideia. Para resumir, congelará o navegador do usuário até que o servidor retorne a resposta e crie uma experiência muito ruim para o usuário. Aqui está outro pequeno resumo do MDN sobre o porquê:

XMLHttpRequest suporta comunicações síncronas e assíncronas. Em geral, no entanto, solicitações assíncronas devem ser preferidas a solicitações síncronas por motivos de desempenho.

Em suma, solicitações síncronas bloqueiam a execução do código ... ... isso pode causar problemas sérios ...

Se você precisar fazer isso, pode passar uma bandeira: Aqui está como:

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. Reestruturar o código

Deixe sua função aceitar um retorno de chamada. No exemplo de código, você foopode aceitar um retorno de chamada. Nós estaremos dizendo ao nosso código como reagir quando fooconcluir.

Assim:

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

Torna-se:

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

Aqui passamos uma função anônima, mas podemos facilmente passar uma referência a uma função existente, fazendo com que pareça:

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

Para mais detalhes sobre como esse tipo de design de retorno de chamada é feito, consulte a resposta de Felix.

Agora, vamos definir o próprio foo para agir de acordo

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

(violino)

Agora fizemos nossa função foo aceitar uma ação a ser executada quando o AJAX for concluído com êxito. Podemos estender isso ainda mais, verificando se o status da resposta não é 200 e agindo de acordo (crie um manipulador de falhas e outros). Resolvendo efetivamente nosso problema.

Se você ainda está com dificuldades para entender isso, leia o guia de introdução do AJAX na MDN.

XMLHttpRequest 2 (leia primeiro as respostas de Benjamin Gruenbaum e Felix Kling )

Se você não usa o jQuery e deseja um XMLHttpRequest 2 curto e agradável que funcione nos navegadores modernos e também nos navegadores móveis, sugiro usá-lo desta maneira:

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

Como você pode ver:

1. É mais curto que todas as outras funções listadas.
2. O retorno de chamada é definido diretamente (portanto, nenhum fechamento extra desnecessário).
3. Ele usa o novo onload (para que você não precise verificar o status de readystate &&)
4. Existem outras situações em que não me lembro que tornam o XMLHttpRequest 1 irritante.

Há duas maneiras de obter a resposta dessa chamada do Ajax (três usando o nome de var XMLHttpRequest):

O mais simples:

this.response

Ou se, por algum motivo, você bind()retornar a chamada para uma classe:

e.target.response

Exemplo:

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

Ou (acima, as funções anônimas são melhores são sempre um problema):

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

Nada mais fácil.

Agora, algumas pessoas provavelmente dirão que é melhor usar onreadystatechange ou até o nome da variável XMLHttpRequest. Isto é errado.

Confira os recursos avançados do XMLHttpRequest

Ele suporta todos os * navegadores modernos. E posso confirmar que estou usando essa abordagem, já que o XMLHttpRequest 2 existe. Nunca tive nenhum tipo de problema em todos os navegadores que uso.

onreadystatechange só é útil se você deseja obter os cabeçalhos no estado 2.

Usar o XMLHttpRequestnome da variável é outro grande erro, pois você precisa executar o retorno de chamada dentro dos fechamentos onload / oreadystatechange, caso contrário você o perdeu.

Agora, se você quiser algo mais complexo usando post e FormData, poderá estender facilmente esta função:

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

Mais uma vez ... é uma função muito curta, mas recebe e publica.

Exemplos de uso:

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

Ou passe um elemento de formulário completo ( document.getElementsByTagName('form')[0]):

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

Ou defina alguns valores personalizados:

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

Como você pode ver, eu não implementei a sincronização ... é uma coisa ruim.

Dito isto ... por que não fazer isso da maneira mais fácil?

Como mencionado no comentário, o uso do erro && synchronous quebra completamente o ponto da resposta. Qual é uma maneira curta e agradável de usar o Ajax da maneira correta?

Manipulador de erro

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

No script acima, você possui um manipulador de erros definido estaticamente para que não comprometa a função. O manipulador de erros também pode ser usado para outras funções.

Mas realmente obter um erro, a única maneira é escrever um URL errado; nesse caso, todo navegador gera um erro.

Os manipuladores de erro talvez sejam úteis se você definir cabeçalhos personalizados, definir o responseType como buffer da matriz de blob ou qualquer outra coisa ...

Mesmo se você passar 'POSTAPAPAP' como método, isso não causará erro.

Mesmo se você passar 'fdggdgilfdghfldj' como formdata, isso não causará um erro.

No primeiro caso, o erro está dentro do displayAjax()under this.statusTextas Method not Allowed.

No segundo caso, simplesmente funciona. Você deve verificar no lado do servidor se passou os dados corretos da postagem.

o domínio cruzado não permitido gera erro automaticamente.

Na resposta a erro, não há códigos de erro.

Existe apenas o this.typeque está definido como erro.

Por que adicionar um manipulador de erros se você não tem controle total sobre erros? A maioria dos erros é retornada dentro disso na função de retorno de chamada displayAjax().

Portanto: não há necessidade de verificação de erros se você conseguir copiar e colar o URL corretamente. ;)

PS: Como o primeiro teste, eu escrevi x ('x', displayAjax) ... e ele obteve uma resposta total ... ??? Então, verifiquei a pasta em que o HTML está localizado e havia um arquivo chamado 'x.xml'. Portanto, mesmo se você esquecer a extensão do seu arquivo, XMLHttpRequest 2 ENCONTRA-O . EU LOL

Ler um arquivo síncrono

Não faça isso.

Se você deseja bloquear o navegador por um tempo, carregue um bom .txtarquivo grande e síncrono.

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

Agora você pode fazer

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

Não há outra maneira de fazer isso de maneira não assíncrona. (Sim, com loop setTimeout ... mas sério?)

Outro ponto é ... se você trabalha com APIs ou apenas os arquivos da sua própria lista ou o que quer que use sempre funções diferentes para cada solicitação ...

Somente se você tiver uma página na qual carregue sempre o mesmo XML / JSON ou o que precisar, precisará de apenas uma função. Nesse caso, modifique um pouco a função Ajax e substitua b por sua função especial.

As funções acima são para uso básico.

Se você deseja estender a função ...

Sim você pode.

Estou usando muitas APIs e uma das primeiras funções que integro a todas as páginas HTML é a primeira função Ajax nesta resposta, apenas com GET ...

Mas você pode fazer muitas coisas com o XMLHttpRequest 2:

Criei um gerenciador de downloads (usando intervalos de ambos os lados com currículo, leitor de arquivos, sistema de arquivos), vários conversores de redimensionadores de imagens usando canvas, preenchendo bancos de dados SQL da web com base64images e muito mais ... Mas nesses casos, você deve criar uma função apenas para isso finalidade ... às vezes você precisa de um blob, buffers de matriz, pode definir cabeçalhos, substituir o tipo de mim e há muito mais ...

Mas a questão aqui é como retornar uma resposta do Ajax ... (adicionei uma maneira fácil.)

Se você estiver usando promessas, esta resposta é para você.

Isso significa AngularJS, jQuery (com adiado), substituição nativa do XHR (busca), EmberJS, salvamento do BackboneJS ou qualquer biblioteca de nós que retorne promessas.

Seu código deve ser algo parecido com isto:

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.

Felix Kling fez um bom trabalho ao escrever uma resposta para as pessoas que usam jQuery com retornos de chamada para AJAX. Eu tenho uma resposta para XHR nativo. Esta resposta é para uso genérico de promessas no front-end ou no back-end.

A questão central

O modelo de simultaneidade JavaScript no navegador e no servidor com NodeJS / io.js é assíncrono e reativo .

Sempre que você chama um método que retorna uma promessa, os thenmanipuladores são sempre executados de forma assíncrona - ou seja, após o código abaixo deles que não está em um.then manipulador.

Isso significa que, quando você está retornando, datao thenmanipulador que você definiu ainda não foi executado. Por sua vez, isso significa que o valor que você está retornando não foi definido com o valor correto no tempo.

Aqui está uma analogia simples para o problema:

    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

O valor de dataé undefinedporque a data = 5peça ainda não foi executada. Provavelmente será executado em um segundo, mas a essa altura é irrelevante para o valor retornado.

Como a operação ainda não aconteceu (AJAX, chamada do servidor, IO, timer), você está retornando o valor antes que a solicitação tenha a chance de informar ao seu código qual é esse valor.

Uma solução possível para esse problema é codificar de forma reativa , informando ao seu programa o que fazer quando o cálculo for concluído. As promessas ativam isso ativamente por serem temporais (sensíveis ao tempo) por natureza.

Resumo rápido das promessas

Uma promessa é um valor ao longo do tempo . As promessas têm estado, elas começam como pendentes sem valor e podem se estabelecer em:

• cumprido, o que significa que o cálculo foi concluído com êxito.
• rejeitado, o que significa que a computação falhou.

Uma promessa só pode mudar de estado uma vez, após o que sempre permanecerá no mesmo estado para sempre. Você pode anexar thenmanipuladores a promessas para extrair seu valor e manipular erros. thenmanipuladores permitem encadear chamadas. As promessas são criadas usando APIs que as retornam . Por exemplo, a substituição AJAX mais moderna fetchou o jQuery$.get retorno prometem.

Quando exigimos .thenuma promessa e devolvemos algo dela - obtemos uma promessa para o valor processado . Se retornarmos outra promessa, teremos coisas incríveis, mas vamos segurar nossos cavalos.

Com promessas

Vamos ver como podemos resolver o problema acima com promessas. Primeiro, vamos demonstrar nossa compreensão dos estados de promessa acima, usando o construtor Promise para criar uma função de atraso:

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

Agora, depois que convertemos setTimeout para usar promessas, podemos usar thenpara fazer valer:

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

Basicamente, em vez de retornar um valor que não podemos fazer por causa do modelo de concorrência - estamos retornando um invólucro para um valor que podemos desembrulhar com then. É como uma caixa com a qual você pode abrir then.

Aplicando isso

Isso significa o mesmo para sua chamada de API original, você pode:

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

Então, isso funciona tão bem. Aprendemos que não podemos retornar valores de chamadas já assíncronas, mas podemos usar promessas e encadeá-las para executar o processamento. Agora sabemos como retornar a resposta de uma chamada assíncrona.

ES2015 (ES6)

O ES6 apresenta geradores que são funções que podem retornar no meio e retomar o ponto em que estavam. Isso geralmente é útil para sequências, por exemplo:

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

É uma função que retorna um iterador sobre a sequência 1,2,3,3,3,3,....que pode ser iterada. Embora isso seja interessante por si só e abra espaço para muitas possibilidades, há um caso interessante em particular.

Se a sequência que estamos produzindo é uma sequência de ações, e não números - podemos pausar a função sempre que uma ação é produzida e aguardá-la antes de retomar a função. Então, em vez de uma sequência de números, precisamos de uma sequência de futuros valores - ou seja: promessas.

Esse truque um tanto complicado, mas muito poderoso, permite escrever código assíncrono de maneira síncrona. Existem vários "corredores" que fazem isso por você, escrevendo um com poucas linhas de código, mas está além do escopo desta resposta. Vou usar o Bluebird's Promise.coroutineaqui, mas existem outros wrappers como coor 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
});

Esse método retorna uma promessa em si, que podemos consumir de outras corotinas. Por exemplo:

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)

No ES7, isso é padronizado ainda mais, existem várias propostas no momento, mas em todas elas você pode awaitprometer. Isso é apenas "açúcar" (melhor sintaxe) para a proposta ES6 acima, adicionando as palavras async- awaitchave e . Fazendo o exemplo acima:

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
}

Ele ainda retorna uma promessa da mesma forma :)

Você está usando o Ajax incorretamente. A idéia é não fazer com que ele retorne nada, mas entregue os dados a algo chamado função de retorno de chamada, que lida com os dados.

Isso é:

function handleData( responseData ) {

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

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

Retornar qualquer coisa no manipulador de envio não fará nada. Em vez disso, você deve entregar os dados ou fazer o que quiser diretamente dentro da função de sucesso.

A solução mais simples é criar uma função JavaScript e chamá-la para o successretorno de chamada do 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);    
}); 

Vou responder com uma história em quadrinhos horrível, desenhada à mão. A segunda imagem é a razão pela qual resultestá undefinedno seu exemplo de código.

Angular1

Para pessoas que estão usando o AngularJS , podem lidar com essa situação usando Promises.

Aqui diz:

As promessas podem ser usadas para desnaturar funções assíncronas e permitem que se encadeie várias funções.

Você pode encontrar uma boa explicação aqui também.

Exemplo encontrado nos documentos mencionados abaixo.

  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 e mais tarde

Veja Angular2o exemplo a seguir, mas é recomendável usar Observablescom Angular2.

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

}

Você pode consumir dessa maneira,

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

Veja o post original aqui. Porém, o Typescript não suporta o es6 Promises nativo ; se você quiser usá-lo, pode ser necessário um plugin para isso.

Além disso, aqui estão as especificações de promessas definidas aqui.

A maioria das respostas aqui fornece sugestões úteis para quando você tem uma única operação assíncrona, mas às vezes isso ocorre quando você precisa executar uma operação assíncrona para cada entrada em uma matriz ou outra estrutura semelhante a uma lista. A tentação é fazer isso:

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

Exemplo:

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

O motivo para isso não funcionar é que os retornos de chamada doSomethingAsyncainda não foram executados no momento em que você está tentando usar os resultados.

Portanto, se você possui uma matriz (ou algum tipo de lista) e deseja executar operações assíncronas para cada entrada, você tem duas opções: Execute as operações em paralelo (sobreposição) ou em série (uma após a outra em sequência).

Paralelo

Você pode iniciar todos eles e acompanhar quantas chamadas de retorno espera e, em seguida, usar os resultados quando receber tantas chamadas de retorno:

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

Exemplo:

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

(Nós poderíamos acabar com expectinge apenas usarresults.length === theArray.length , mas isso nos deixa abertos à possibilidade de theArraymudar enquanto as chamadas são excelentes ...)

Observe como usamos a indexpartir deforEach para salvar o resultado na resultsmesma posição da entrada a que se refere, mesmo que os resultados cheguem fora de ordem (já que as chamadas assíncronas não são necessariamente concluídas na ordem em que foram iniciadas).

Mas e se você precisar retornar esses resultados de uma função? Como as outras respostas apontaram, você não pode; você precisa que sua função aceite e chame um retorno de chamada (ou retorne uma promessa ). Aqui está uma versão de retorno de chamada:

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

Exemplo:

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

Ou aqui está uma versão retornando um 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);
});

Claro se doSomethingAsync nos passassem erros, usaríamos rejectpara rejeitar a promessa quando recebíamos um erro.)

Exemplo:

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

(Ou, alternativamente, você pode fazer um invólucro para doSomethingAsync que retorne uma promessa e fazer o seguinte ...)

Se doSomethingAsynclhe der uma promessa , você pode usar Promise.all:

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

Se você sabe que doSomethingAsyncisso ignorará um segundo e um terceiro argumento, você pode apenas passá-lo diretamente para map( mapchama seu retorno de chamada com três argumentos, mas a maioria das pessoas usa apenas o primeiro na maior parte do tempo):

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

Exemplo:

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

Observe que Promise.allresolve sua promessa com uma variedade de resultados de todas as promessas que você faz quando todas são resolvidas ou rejeita sua promessa quando a primeira das promessas que você rejeita.

Series

Suponha que você não queira que as operações sejam paralelas? Se você deseja executá-los um após o outro, precisará aguardar a conclusão de cada operação antes de iniciar a próxima. Aqui está um exemplo de uma função que faz isso e chama um retorno de chamada com o resultado:

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

(Como estamos fazendo o trabalho em série, podemos apenas usá-lo, results.push(result)pois sabemos que não obteremos resultados fora de ordem. No exemplo acima, poderíamos ter usado results[index] = result;, mas em alguns dos exemplos a seguir não temos um índice usar.)

Exemplo:

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

(Ou, novamente, crie um invólucro para doSomethingAsyncque você prometa e faça o abaixo ...)

Se doSomethingAsynclhe der uma promessa, se você puder usar a sintaxe do ES2017 + (talvez com um transpilador como o Babel ), poderá usar uma asyncfunção com for-ofe 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);
});

Exemplo:

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

Se você ainda não pode usar a sintaxe do ES2017 +, pode usar uma variação no padrão "Redução de promessas" (isso é mais complexo que a redução de promessas usual porque não estamos passando o resultado de um para o outro, mas sim reunindo seus resultados em uma matriz):

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

Exemplo:

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

... o que é menos complicado com as funções de seta do 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);
});

Exemplo:

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

Veja este exemplo:

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

Como você pode ver, getJokeestá retornando uma promessa resolvida (é resolvida ao retornar res.data.value). Portanto, você espera até que a solicitação $ http.get seja concluída e o console.log (res.joke) seja executado (como um fluxo assíncrono normal).

Este é o plnkr:

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

Caminho ES6 (assíncrono - aguardar)

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

Este é um dos lugares em que o conceito de vinculação ou armazenamento de dados usado em muitas novas estruturas JavaScript funcionará muito bem para você ...

Portanto, se você estiver usando Angular, React ou qualquer outra estrutura que execute duas formas de vinculação de dados ou conceito de armazenamento, esse problema será simplesmente corrigido para você. Assim, em palavras simples, seu resultado será undefinedo primeiro estágio, portanto, você deve obter result = undefinedantes de receber o dados, assim que você obtiver o resultado, ele será atualizado e atribuído ao novo valor que resposta da sua chamada Ajax ...

Mas como você pode fazer isso em javascript puro ou jQuery, por exemplo, como você fez nesta pergunta?

Você pode usar um retorno de chamada , promessa e observável recentemente para lidar com isso, por exemplo, em promessas que temos algumas funções como success()ou then()que serão executadas quando seus dados estiverem prontos para você, o mesmo que com a função de retorno de chamada ou assinatura observável .

Por exemplo, no seu caso em que você está usando jQuery , você pode fazer algo assim:

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

Para obter mais informações, estude sobre promessas e observáveis, que são maneiras mais recentes de fazer isso de forma assíncrona.

É um problema muito comum que enfrentamos enquanto lutamos com os 'mistérios' do JavaScript. Deixe-me tentar desmistificar esse mistério hoje.

Vamos começar com uma simples função JavaScript:

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

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

É uma simples chamada de função síncrona (onde cada linha de código é 'finalizada com seu trabalho' antes da próxima em sequência), e o resultado é o mesmo que o esperado.

Agora, vamos adicionar um pouco de distorção, introduzindo pouco atraso em nossa função, para que todas as linhas de código não sejam 'finalizadas' em sequência. Assim, ele emulará o comportamento assíncrono da função:

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

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

Então lá está, esse atraso acabou com a funcionalidade que esperávamos! Mas o que exatamente aconteceu? Bem, é realmente muito lógico se você olhar para o código. a função foo(), na execução, não retorna nada (o valor retornado é undefined), mas inicia um timer, que executa uma função após 1s para retornar 'wohoo'. Mas como você pode ver, o valor atribuído à barra é o material retornado imediatamente de foo (), que não é nada, é apenas justo undefined.

Então, como lidamos com esse problema?

Vamos pedir à nossa função uma PROMESSA . Promessa é realmente sobre o que isso significa: significa que a função garante que você forneça qualquer saída que obtiver no futuro. então vamos vê-lo em ação para o nosso pequeno problema acima:

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

Assim, o resumo é - para lidar com funções assíncronas, como chamadas baseadas em ajax, etc., você pode usar uma promessa ao resolvevalor (que pretende retornar). Assim, em resumo, você resolve o valor em vez de retornar , em funções assíncronas.

UPDATE (Promessas com assíncrono / espera)

Além de then/catchtrabalhar com promessas, existe mais uma abordagem. A idéia é reconhecer uma função assíncrona e esperar as promessas serem resolvidas antes de passar para a próxima linha de código. Ainda é apenas um promisessegredo, mas com uma abordagem sintática diferente. Para tornar as coisas mais claras, você pode encontrar uma comparação abaixo:

então / catch versão:

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

versão assíncrona / aguardada:

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

Outra abordagem para retornar um valor de uma função assíncrona é passar um objeto que armazenará o resultado da função assíncrona.

Aqui está um exemplo do mesmo:

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

Estou usando o result objeto para armazenar o valor durante a operação assíncrona. Isso permite que o resultado esteja disponível mesmo após o trabalho assíncrono.

Eu uso muito essa abordagem. Eu estaria interessado em saber como essa abordagem funciona quando está envolvido o retorno do resultado através de módulos consecutivos.

Embora promessas e retornos de chamada funcionem bem em muitas situações, é difícil expressar algo como:

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

Você acabaria passando async1; verifique se nameestá indefinido ou não e chame o retorno de chamada adequadamente.

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

async1(name, async2)

Embora seja bom em pequenos exemplos, fica irritante quando você tem muitos casos semelhantes e tratamento de erros envolvidos.

Fibers ajuda a resolver o problema.

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
}

Você pode conferir o projeto aqui .

O exemplo a seguir que escrevi mostra como

• Manipular chamadas HTTP assíncronas;
• Aguarde a resposta de cada chamada da API;
• Use o padrão Promise ;
• Use o padrão Promise.all para ingressar em várias chamadas HTTP;

Este exemplo de trabalho é independente. Ele definirá um objeto de solicitação simples que usa o XMLHttpRequestobjeto de janela para fazer chamadas. Ele definirá uma função simples para aguardar a conclusão de várias promessas.

Contexto. O exemplo é consultar o ponto de extremidade da API da Web do Spotify para procurar playlistobjetos para um determinado conjunto de cadeias de consulta:

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

Para cada item, uma nova promessa acionará um bloco - ExecutionBlock, analise o resultado, programe um novo conjunto de promessas com base na matriz de resultados, que é uma lista de userobjetos do Spotify e execute a nova chamada HTTP de ExecutionProfileBlockforma assíncrona.

Você pode ver uma estrutura Promise aninhada, que permite gerar várias chamadas HTTP aninhadas completamente assíncronas e juntar os resultados de cada subconjunto de chamadas Promise.all.

NOTA As searchAPIs recentes do Spotify exigirão que um token de acesso seja especificado nos cabeçalhos da solicitação:

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

Portanto, para executar o exemplo a seguir, você precisa colocar seu token de acesso nos cabeçalhos da solicitação:

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" />

Eu discuti extensivamente esta solução aqui .

Resposta curta: você precisa implementar um retorno de chamada como este:

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

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

Resposta de 2017: agora você pode fazer exatamente o que deseja em todos os navegadores e nós atuais

Isso é bem simples:

• Devolver uma promessa
• Use o 'aguardar' , que instruirá o JavaScript a aguardar a promessa de ser resolvido em um valor (como a resposta HTTP)
• Adicione a palavra-chave 'async' à função pai

Aqui está uma versão funcional do seu código:

(async function(){

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

})()

aguardar é suportado em todos os navegadores atuais e no nó 8

Js é um único encadeamento.

O navegador pode ser dividido em três partes:

1) Loop de Eventos

2) API da Web

3) Fila de Eventos

O loop de eventos é executado para sempre, ou seja, é um tipo de loop infinito. A fila de eventos é onde todas as suas funções são pressionadas em algum evento (exemplo: clique); este é um por um realizado na fila e colocado no loop de eventos que executa essa função e se prepara automaticamente para o próximo após o primeiro ser executado. Isso significa que a execução de uma função não inicia até que a função antes da fila seja executada no loop de eventos.

Agora, vamos pensar que pressionamos duas funções em uma fila, uma para obter dados do servidor e outra utiliza esses dados. A função serverRequest entra no loop de eventos e faz uma chamada para o servidor, pois nunca sabemos quanto tempo levará para obter dados do servidor, portanto, espera-se que esse processo leve tempo e ocupamos nosso loop de eventos, pendurando nossa página, é aí que a Web A API entra em função, assume essa função do loop de eventos e lida com o servidor, liberando o loop de eventos, para que possamos executar a próxima função da fila. A próxima função na fila é utiliseData () que entra em loop, mas por causa de nenhum dado disponível, ele vai o desperdício e a execução da próxima função continuam até o final da fila (isso é chamado de chamada assíncrona, ou seja, podemos fazer outra coisa até obtermos dados)

Vamos supor que nossa função serverRequest () tenha uma declaração de retorno em um código, quando recuperarmos os dados da API da Web do servidor, eles serão colocados na fila no final da fila. Como é empurrado no final da fila, não podemos utilizar seus dados, pois não há nenhuma função em nossa fila para utilizá-los. Portanto, não é possível retornar algo do Async Call.

Portanto, a solução para isso é retorno ou promessa .

Uma imagem de uma das respostas aqui, explica corretamente o uso de retorno de chamada ... Damos nossa função (função que utiliza dados retornados do servidor) para funcionar como servidor de chamada.

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

}

No meu código é chamado como

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

Retorno de chamada Javscript.info

Você pode usar esta biblioteca personalizada (gravada usando o Promise) para fazer uma chamada remota.

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

Exemplo de uso simples:

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

Outra solução é executar o código via executor seqüencial nsynjs .

Se a função subjacente for prometida

O nsynjs avaliará todas as promessas sequencialmente e colocará o resultado da promessa na datapropriedade:

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>

Se a função subjacente não for prometida

Etapa 1. Função Wrap com retorno de chamada no wrapper compatível com nsynjs (se houver uma versão promissificada, você pode pular esta etapa):

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;