Observable

É uma abstração que nos ajuda a lidar com eventos assíncronos, pode ser uma coleção que emite notificações sempre que ocorre uma mudança em um de seus itens.

Tenha como exemplo uma lista de transmissão de promoções do WhatsApp, você não precisa ficar perguntando a todo momento se tem alguma nova promoção, no momento que entrar alguma(s) promoção criada pelo seu admin você será notificado quem algum coisa nova, ao abrir a lista, já estará atualizada de acordo com a suas mudanças mais recentes, podemos fazer a analogia seguinte:

• Lista de Transmissão > Observable de Promoções que fará as notificações para o inscrito.

• Criador da Lista > Gerenciador das alterações de conteúdos.

• Usuários na Lista > São os inscritos para receber as mudanças.

Abaixo na ilustração tem como exemplo um observable, o administrador/criador do sistema cria um observable que tem uma lista de produtos com seus valores, isto é, uma coleção de objetos formados por {produto+preço}.

Temos em cena, os Users A, B e C que consomem essa lista de produtos, na primeira tela seria um consumo fictício direto da fonte de dados sem inscrição ou levar em conta o observable de produtos.

Na segunda tela seria o resultado exibido após uma alteração no observable para todos o inscritos.

Abaixo segue um exemplo de um Observable empregado no Angular.

// Importações das bibliotecas utilizadas
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

// Notação para permitir a injeção do DataService a partir de qualquer ponto da aplicação
@Injectable({
  providedIn: 'root'
})
export class DataService {
  //url da onde virá os dados que iremos consumir	
  private apiUrl = 'https://api.meusite.com/dados';

  constructor(private http: HttpClient) { }

  // Método para obter dados usando HttpClient que retorna um Observable de qualquer tipo
  obterDados(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

// Em seu componente
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-meu-componente',
  templateUrl: './meu-componente.component.html',
  styleUrls: ['./meu-componente.component.css']
})
export class MeuComponenteComponent implements OnInit {
  dados: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    // Se inscrever no Observable retornado pelo serviço
    this.dataService.obterDados().subscribe(
      (resposta) => {
        this.dados = resposta;
      },
      (erro) => {
        console.error('Erro ao obter dados:', erro);
      }
    );
  }
}

Mais algumas características de um Observable:

• Fluxo de Dados Unidirecional: Eles funcionam de forma unidirecional, emitindo dados ou eventos ao longo do tempo.

• Múltiplos Valores: Diferentemente de Promises, que lidam com um único evento, um Observable pode emitir zero, um ou múltiplos eventos.

• Operações Assíncronas: São usados para realizar operações assíncronas, como chamadas de API ou eventos de usuário.

• Flexibilidade: Oferecem mais flexibilidade do que Promises, permitindo operações como cancelamento de requisições e retentativas.

• Subscrição: Você se inscreve em um Observable para reagir aos dados emitidos por ele.

Pesquise sobre Programação Reativa se deseja ampliar o contexto de uso dos observables.

Fique a vontade para comentar e contribuir com sua visão/conhecimento sobre Observables.

---

Referências: treinaweb.com.br, dev.to, ibm.com, tableless.com.br