0

Estou trabalhando em uma aplicação com Ionic 3 + Angular 5 e tenho que pegar um valor do storage do Ionic da seguinte forma:

 this.userStorageService.get('expiresIn')
            .then((data) => this.tokenExpirationTimeFromApi = data);
 console.log(this.tokenExpirationTimeFromApi);

No entanto quando faço o console.log fora da promisse é retornado 'undefined', mas se eu colocar o console.log dentro do .then ele retorna normal. Ai eu fiz um setTimeOut:

this.userStorageService.get('expiresIn')
        .then((data) => this.tokenExpirationTimeFromApi = data);
    setTimeout(() => {
        console.log(this.tokenExpirationTimeFromApi);
    },1000);

Dessa forma funciona, mas acho que não é o certo a se fazer. Como que faço pra ter o valor do retorno da promisse e só a partir daí continuar o fluxo da aplicação? Help, please...

1 Resposta 1

0

Amigo, o que ocorre é que um Promise executa de forma assíncrona, ou seja, quando você printa o console.log na próxima linha fora do then() o valor ainda não foi recuperado do storage. O valor é recuperado corretamente, somente não no momento que você espera que seja, já que está misturando código síncrono com assíncrono.

Para esclarecer mais sobre o funcionamento dos Promises dê uma lida na documentação da mozilla.

PS: Talvez se você postar mais detalhes do seu código seja possível auxiliar em uma forma de proceder.

PS2: A forma de trabalhar com Promises é um pouco diferente do habitual quando você programa de forma mais "procedural". Uma possibilidade para o seu código (não sabendo realmente o que você deseja fazer) seria retornar o resultado no then para um proximo callback e continuar o processamento.


Segue um exemplo um pouco mais elaborado desta vez, aqui eu simulei um Storage que retorna um promise para um Provider, que processa essa informação e encaminha um Promise com esse valor já processado para o Controller que então utiliza um callback, que não é exatamente necessário para atualizar a View.

class Storage {
  constructor() {
    this.data = Math.random() * 10;
  }
  
  getData() {
    console.log("Buscando dados no storage..")
    return new Promise((resolve) => {
      // simula um tempo indeterminado para tarefa completar
      setTimeout(() => resolve(this.data), Math.random() * 3000);
    });
  }
}

class MyStorageProvider{
  constructor() {
    this.storage = new Storage();
  }
  
  fetchStorageData() {
    console.log("Chamando storage para pegar dados..");
    return this.storage.getData()
        .then(data => {
      console.log("Dados recuperados... verificando.");
      return data > 5;
    });
  }
}

class MyController {
  constructor() {
    this.output = document.querySelector('#output');
    this.provider = new MyStorageProvider();
  }
  
  requestDataFromStorage() {
    this.provider.fetchStorageData()
      // chamando o callback assim evita perder o escopo.
      // https://stackoverflow.com/questions/34930771/why-is-this-undefined-inside-class-method-when-using-promises
      .then(data => this.handleStorageData(data));
  }
  
  handleStorageData(data) {
    console.log("Processando dados para visão.. ");
    this.output.innerHTML = data;
  } 
}

var controller = new MyController();
controller.requestDataFromStorage();
<p id="output"></p>

8
  • Eu simplesmente quero pegar esse expirationIn para depois poder fazer uma validação com o horário atual. Tipo: Commented 14/03/2018 às 12:04
  • this.currentTime = new Date().getTime(); this.tokenExpirationTime = new Date(this.tokenExpirationTimeFromApi).getTime(); return this.currentTime > this.tokenExpirationTime; Commented 14/03/2018 às 12:04
  • Vou tentar dessa forma que você mostrou... Commented 14/03/2018 às 12:05
  • Não deu certo, o problema é que eu preciso retornar um boolean para a chamada desse método, tipo falando se o horário atual é maior que o do expirationIn. Fiz utilizando o callback, mas continua retornando undefined. Commented 14/03/2018 às 12:13
  • da uma olhada se o outro exemplo te ajuda. Commented 14/03/2018 às 14:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .