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>