Não entendi o conceito

Olá, Andressa! Tudo certo?

Desculpa pela demora.

Quando for pensar em um Observable, pense em uma coleção, como uma array.

Arrays

Quando temos uma array, podemos executar uma ação para cada elemento dela, certo? Temos vários métodos para isso inclusive, o filter que faz uma verificação para cada elemento, o map que retorna um valor para cada elemento, o forEach que executa um processo para cada elemento, entre outros.

Essa é a primeira camada que você precisa entender, e acredito que você já tenha familiaridade. Mas agora, vamos falar de algo muito similar, porém que você talvez nunca tenha visto, ou usado: Iteradores.

Iteradores e geradores

Quando estamos fazendo uma ação para cada elemento de uma coleção, como um loop, ou um dos métodos da array, estamos iterando sobre a array, portanto a array é iterável.

Certo, temos então o objeto que é iterado, mas precisamos de algo que faça a ação de iterar, certo? Esses são os iteradores. Um iterador funciona assim:

• Passamos um objeto iterável para uma função gerar um iterador;
• O iterador acessa o primeiro índice da coleção, ou seja, o índice 0;
• O iterador retorna um objeto com uma função chamada next;
• A função next retorna um objeto.
  • Se existe um próximo índice na coleção, o objeto retornado possui o valor do próximo índice e a propriedade done com o valor false ({ value, done })
  • Se não existe um próximo índice, ou seja, a coleção acabou, o objeto retornado é { done: true }.

Em um cenário prático, teríamos o seguinte:

const array = ['primeiro valor', 'segundo valor', 'terceiro e último valor'];

const iterador = geraIterador(array); // vamos supor que esse iterador foi criado em outro lugar por enquanto
// nesse momento o iteravel é um objeto com a função next()

console.log(iterador.next().value); // retorna 'primeiro valor'
console.log(iterador.next().value); // retorna 'segundo valor';
console.log(iterador.next().value); // retorna 'terceiro e último valor';
console.log(iterador.next().done); // retorna true;

O cenário acima não é realista mesmo, se nós não soubermos o tamanho da coleção, sempre que quisermos pegar um valor, precisamos primeiro verificar se done é true.

Mas o ponto principal aqui é: uma função recebe um iterável, gera um objeto iterador e a cada iteração, guarda a posição atual.

Não é muito diferente de como os métodos como map funcionam, certo? Eles vão de elemento em elemento, executando algo, e quando chegam ao final, param.

Observables

Vamos supor que você possui uma array que guarda os movimentos do mouse do usuário. A cada movimento, você quer adicionar a posição do mouse na array. Você pode fazer isso com o addEventListener, certo? Ele ficará escutando os movimentos, e executando uma função para cada movimento.

A ideia de um Observable é similar. Quando temos um Observable, temos um objeto iterável que recebe dados ao longo do tempo, e nós queremos ficar escutando esses dados, observando. O Observable permite isso, e a cada dado que chega, ele emite um valor para quem está observando, que são os subscribers.

Tanto com iteradores e observadores, temos uma dinâmica com dois lados: um produtor e um consumidor. A diferença é quem está no controle. Com iteradores, o consumidor precisa "pedir" para algo ser feito sempre que quiser (executar a função next()), enquanto um observador define apenas o que deve ser feito quando novas informações chegarem, e é o produtor que se encarrega de executar essa função toda vez.

Com fluxos de dados assíncronos, o observador pode ficar observando o fluxo infinitamente, ou até o fluxo acabar, e essa é a vantagem do Observable, aquele valor não é fixo, ele está mudando constantemente, e mesmo assim o comportamento que você estabeleceu ao se inscrever será executado, independentemente de você ter se inscrito quando havia zero elementos dentro daquela coleção.

O observador pode lidar com três cenários quando cada dado chegar:

• onNext: o que fazer quando um item chegar;
• onError: o que fazer caso um erro ocorra e nenhum item chege;
• onCompleted: não há um próximo dado, esse é o fim da coleção.

É um assunto avançado, então tudo bem se você não entender de primeira, leva alguns exemplos e algumas definições para as coisas começarem a fazer sentido. Se quiser, você pode ler sobre Observables aqui.

E qualquer coisa é só avisar! Bons estudos!