Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como resolver o assincronismo de uma Post Request no Ionic?

Olá meus amigos. Estou travado em um erro talvez muito estúpido. Eu faço uma Post Request (Http) e em seguida eu precisava exibir a string de resposta em um alertController, mas a resposta demora alguns milisegundos para chegar e só chega depois que o alertController foi exibido.

Existe alguma maneira de forçar o meu código a parar e esperar a chegada da resposta da minha chamada? Vi alguns comentários sobre Promises e Callbacks porém não entendi muito bem como implementá-los de maneira prática.

Se alguém puder ajudar, aqui está o meu código simplificado:

      verifica(address, password){      
          this.getTreinadorPokemon(address);
//AQUI ELE DEVIA ESPERAR O RESULTADO DA FUNÇÃO
//getTreinadorPokemon ANTES DE CONTINUAR
          let alert = this.alertCtrl.create({
            title: 'Achei',
            subTitle: 'Seu Pokemon é:' + this.dados,
            buttons: ['Ok']
          });
          alert.present();
          return;
        }
      }


    getTreinadorPokemon(address){
     let body = {
      "email" : address
    };
    this.db.getDados('GetTreinadorPokemon',body).subscribe(
      (data) => {
        this.dados = data.pokemon;
      },
      (err) => {
        console.log("Você não possui um Pokémon ainda :(");
      }
    );
}

Agradeço desde já! Um abraço a todos!

2 respostas
solução!

Oi Pedro,

você identificou direitinho o problema

Sobre a implementação com Promises e Callbacks, isso são os nomes das coisas que vão permitir a gente esperar o request acabar pra daí criar o alertCtrl.

Seguinte, vou aproveitar o seu código de agora pra explicar isso :)

Lá no método getTreinadorPokemon você já tem um código que espera o request HTTP acabar:

 this.db.getDados('GetTreinadorPokemon',body)

Nessa linha você executa uma função que é assíncrona e retorna um objeto do tipo Observable. O que isso significa é que o resultado dessa função não são os dados, mas sim, um objeto que representa o request. O request vai demorar até ser completado e por isso é assíncrono, então não adianta um código que quiser acessar os dados vir logo depois da execução da função. Esse código precisa ser guardado para ser executado só quando o request acabar. Guardamos o código numa função e passamos essa função pro request. Quando o request acabar ele mesmo trata de executar essa função passsando os dados pra ela. Essa é a ideia da função de callback.

No caso do seu código, você já passa duas funções de callback para o Observable/Request:

this.db.getDados('GetTreinadorPokemon',body).subscribe(
      (data) => {
        this.dados = data.pokemon;
      },
      (err) => {
        console.log("Você não possui um Pokémon ainda :(");
      }
    );

Dentro do subscribe, passamos a função de callback que o Observable executará quando tudo certo, ou a função que será executada quando tudo der errado.

No seu caso, quando tudo dá certo você cria uma propriedado dados com o valor que veio do banco:

(data) => {
    this.dados = data.pokemon;
}

Porém na verdade o que você quer é executar esse código aqui:

let alert = this.alertCtrl.create({
    title: 'Achei',
    subTitle: 'Seu Pokemon é:' + this.dados,
    buttons: ['Ok']
});
alert.present();

Para isso, o que você deve fazer é parar de fazer o subscribe e retornar o Observable do request no método getTreinadorPokemon. Fazendo isso, no método verifica você pode fazer um subscribeno resultado de this.getTreinadorPokemon(address).

O código ficaria assim:

  verifica(address, password){      
    this.getTreinadorPokemon(address).subscribe(
        (data) => {
            let alert = this.alertCtrl.create({
              title: 'Achei',
              subTitle: 'Seu Pokemon é:' + data.pokemon,
              buttons: ['Ok']
            });
            alert.present();
        }
    )
    return;
}


getTreinadorPokemon(address){
    let body = {
        "email" : address
    };
    return this.db.getDados('GetTreinadorPokemon',body)
}

Artur, funcionou certinho agora.

Eu entendi a ideia que você sugeriu. É basicamente esperar ele finalizar a chamada para continuar o código seguinte simplesmente colocando o código seguinte dentro do subscribe.

Não tenho palavras para agradecer o suporte. Muito Obrigado! Um forte abraço!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software