1

Minha classe está consumindo um webservice de clima tempo através do método _interceptaClima(). Percebam que eu vou tratando a resposta através de callbacks.

O problema é que no método calculaDesafio(), onde eu efetivamente implemento a regra de acordo com a resposta, eu preciso retornar um valor porém não estou conseguindo lidar com esse problema de escopo (Tentei declarar a variável desafio antes mas obviamente falhou pois o escopo é diferente).

Como retornar o/um resultado obtido dentro da callback no retorno da função que está encapsulando ela? Pensei e tentei aplicar o uso do Reflect mas acho que não é o caso.

Acho que pode ser uma pergunta interessante para abordarmos conceitos sobre escopo, callbacks, etc..

Obrigado!

PS. Pesquisei sobre promises e acho que pode ser uma saída porém queria verificar o problema nesse contexto atual.

class DiariaDinamica {

    constructor(objetivoMensal, valorVendido) {
        
        this.data = new Date();
        this.objetivoMensal = objetivoMensal;
        this.valorVendido = valorVendido;
        this._valorFaltante = this.objetivoMensal - this.valorVendido;
        this._diariaProporcional = this._valorFaltante / this._diasRestantes();
    };
    

    calculaDesafio() {
        
        let desafio;
        this._consultaClima(respostaConsulta => {  // respostaConsulta é um booleano
            if (respostaConsulta) {
                desafio = this._diariaProporcional * 1.10;
            };
        });

        return desafio;  // retorna undefined
    };


    _interceptaClima(callback) {

        ClimaService.consultaClima((err, id) => {

            if (err) {
                console.log(err); 
                return
            } 
            
            callback(id);
        }); 

        
    };


    _consultaClima(callback) {
        
        this._interceptaClima((id) => {

            let respostaConsulta = this._climaFavoravel().includes(id)  
            
            callback(respostaConsulta);
        });
        
    };


    _climaFavoravel() {

        const listaDeId = [
            200, 201, 202, 210, 211, 212, 221, 230, 231, 232,
            300, 301, 302, 310, 311, 312, 313, 314, 321,
            500, 501, 502, 503, 520, 522, 531, 504,
            800, 801, 802, 804 // Tirar o 800, 801, 802;
        ];

        return listaDeId;
    };   
};

SEGUE CÓDIGO DA VIEW:

class ResultadoView {

    constructor() {
        let $ = document.querySelector.bind(document)
        this.divFormulario = $('.formulario')
        this.divResposta = $('#principal')
        this.divAreaSugestao = $('#sugestao')
    }

    
    update(novaDiaria) {

        this.divResposta.innerHTML = this._templateResultados(novaDiaria)
    };

    
    _templateResultados(novaDiaria) {

        let data = new Date()
        return ` 

        <table id="tabelaResultados">
        <thead></thead>
        <tr>
            <td colspan='2'>${data.getDate()}/${data.getMonth() + 1}<img src='_assets/calendario-oficial.png' id='calendario-mini'></td>
            <td rowspan='6' id='cadastre-se' style='text-align: center'><button type='submit' id='btn-cadastrar'>Cadastre-me</button></td>
        </tr>
        <tr>
            <td>Desafio</td>
            <td>${novaDiaria.calculaDesafio().toLocaleString('pt-BR', {style: 'currency', 'currency': 'BRL'}) : ''}</td>
        </tr>
        <tr>
            <td>Diária proporcional</td>
            <td>${novaDiaria.diariaProporcional.toLocaleString('pt-BR', {style: 'currency', 'currency': 'BRL'})}</td>
        </tr>
        <tr>
            <td>Mínimo (85%)</td>
            <td>${novaDiaria.calculaMinima().toLocaleString('pt-BR', {style: 'currency', 'currency': 'BRL'})}</td>
        </tr>
        <tr>
            <td>Falta pra bater</td>
            <td>${novaDiaria.valorFaltante.toLocaleString('pt-BR', {style: 'currency', 'currency': 'BRL'})}</td>
        </tr>
        <tr id='projecao'>
            <td>Projeção atual (%)</td>
            <td>${novaDiaria.calculaProjecao().toFixed(2)}%</td>
        </tr>
        </table>
        `
    };
2
  • Podes mostrar onde e como estás a chamar o método calculaDesafio ?
    – Sergio
    Commented 29/07/2020 às 6:08
  • @Sergio editei a pergunta irmão. Repare que eu chamo o método calculaDesafio() em uma das TDs
    – Curi
    Commented 29/07/2020 às 16:51

1 Resposta 1

3

O problema do seu código não é um problema de escopo.

Um callback pode acessar variáveis declaradas em níveis superiores do escopo, o problema do seu código está na ordem em que o código é executado.

calculaDesafio() {
    
    let desafio;
    this._consultaClima(respostaConsulta => {
        if (respostaConsulta) {
            desafio = this._diariaProporcional * 1.10;
        };
    });

    return desafio;  // retorna undefined
};

Nesse trecho, a chamada do método _consultaClima irá eventualmente resultar na chamada do método ClimaService.consultaClima, que acredito ser uma operação de entrada/saída. Esse tipo de operação resulta num tempo de latência, o qual seu processo não espera pela resolução.

Alias, é por essa razão que o código utiliza callbacks ao invés de ser escrito de forma imperativa, você passa uma função para ser executada durante a resolução da sua requisição, e enquanto isso o restante do seu código pode continuar sendo executado, sem que o processo principal fique travado esperando uma resposta.

Então o que ocorre aqui, é o seguinte

  • desafio é declarado
  • você invoca _consultaClima passando uma callback
  • _consultaClima eventualmente invoca ClimaService.consultaClima
  • antes de ClimaService.consultaClima resolver, o processo volta a executar o restante das instruções
  • desafio é retornado pela sua função antes de ser inicializado, pois a callback ainda não foi executada

Então como você mesmo comentou, uma saída seria utilizar uma Promise.

Promise é um objeto com alguns métodos para ajudar você a tratar esses processos de natureza assíncrona. Você retorna a promise num estado pendente, e então invoca um método passando uma callback para ser executada quando o processo que está pendente resolver.

calculaDesafio() {

    return new Promise((resolve, reject) => {
       this._consultaClima((respostaConsulta) => {
           if (respostaConsulta) { resolve(this._diariaProporcional * 1.10); }
           else { reject(); }
       });
    });

}

E então você pode pegar e tratar o retorno de calculaDesafio da seguinte maneira:

diariaDinamica.calculaDesafio().then(resultado => {
    console.log(resultado);
    // restante do seu código
});

Mas isso não te livrou das callbacks, te livrou? Qual a motivação para utilizar isso?

Existe uma outra abstração que você pode utilizar com promises, o modificador async e o operador await.

async e await lhe permite tratar promises de maneira imperativa. Uma função declarada com o modificador async automaticamente embrulha o seu retorno numa promise, e o operador await invoca o método then da sua promise, e te retorna o resultado na mesma linha da seguinte maneira:

async calculaDesafio() {
    // _consultaClima precisa retornar uma promise
    const respostaConsulta = await this._consultaClima();
    if (respostaConsulta) {
        return this._diariaProporcional * 1.10;
    }
}

E então

const resultado = await diariaDinamica.calculaDesafio();

async e await torna o código mais legível, mas pessoalmente não acho que seja um conceito tão simples de explicar. Vale a pena ler mais a respeito antes de utiliza-los.

1
  • excelente! vou aprofundar mais nesses conceitos, porém achei uma outra solução mudando a arquitetura da aplicação. Passei a chamada da webservice para o controller, daí dentro da callback eu chamo a atualização da view, depois que eu tenho a resposta pronta. Uma coisa que estava dificultando era justamente chamar a API dentro do model e não no controller..
    – Curi
    Commented 29/07/2020 às 21:17

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 .