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

Dúvida sobre o construtor da classe e métodos

Bom dia,

Flávio qual o motivo que isso ocorre, qual a explicação lógica? As atribuições das variáveis parecem que não funcionam ...

Ps. na function como fiz o treinamento do javascript avançado, aprendemos que na arrowFunction se eu tiver 1 linha posso abdicar do "{ }" deixando meu código mais sucinto.. então queria fazer assim:

        let stream = http.get('v1/fotos').subscribe(res => this.fotos = res.json());
        console.log(this.fotos);

Mas não mostra nada no console, só mostra se eu colocar "{}" na function e colocar o console.log dentro da função

export class AppComponent {

    fotos: Object[] = [];
    nome: string = '';

    constructor(http: Http){

        let stream = http.get('v1/fotos');
        stream.subscribe(res => {
            this.fotos = res.json()
            this.nome = "Curso da Alura";

          /*
               Neste ponto eu consigo ver o resultado no console , mas 
              fora da arrowFunction não consigo.
                console.log(this.fotos);
               console.log(this.nome);
                     */

        });

        // aqui não mostra nada
        console.log(this.fotos);
        console.log(this.nome);

    }
}
2 respostas
solução!

Bom dia Jose. O motivo disso é o conceito fundamental do JavaScript sobre assincronismo e não o fato de termos usado ou não arrow function.

Operações de I/O são assíncronas e aprendemos lá quando começamos a programar JavaScript que o retorno de operações assíncronas devem ser obtidas através de um callback ou qualquer outro recurso de linguagem que saiba lidar com assincronismo.

Quando você faz

        let stream = http.get('v1/fotos').subscribe(res => this.fotos = res.json());
        console.log(this.fotos);

A linha do console.log será executa antes da linha que traz os dados, justamente por http.get ser assíncrona.

Se a operação de I/O fosse síncrona, toda sua aplicação ficaria travada até que a operação terminasse (imagina a requisição demorando 10 segundos e o usuário não podendo fazer nada nesse tempo), porque JavaScript é single thread. Por isso toda operação de I/O é assíncrona não bloqueante por natureza.

Assim como no javaScript padrão, se você quiser lidar com o retorno de uma operação assíncrona deve lidá-lo no próprio callback passado para a operação e não fora dele.

Veja um exemplo com escopo menor:

setTimeout(() => console.log('terminei'), 1000);
console.log('FIM');

Será escrito no console

FIM
terminei

Se você quer que seja impresso FIM depois de 'terminei" precisará executar a instrução do console dentro do callback:

setTimeout(() => {
   console.log('terminei');
   console.log('FIM');
}, 1000);

É uma situação análoga a que você esta enfrentando.

Caraca... é isso mesmo...

Inclusive no treinamento de javascript foi abordado isso, obrigadasso..

Como diz um instrutor que faço aula. "Recordar é viver".. lol

Abcs