Entendendo as Diferenças: Promises vs. Observables em JavaScript 🚀

Diego Ceccon - Diguya — Sat, 09 Dec 2023 02:30:38 +0000

No universo da programação JavaScript, dois conceitos fundamentais para lidar com operações assíncronas são 🌟Promises🌟 e os 🌀Observables🌀.
Vamos explorar essas duas abstrações de forma simplificada para entender suas diferenças e quando usar cada uma.

Conceitos:

🌟 Promise:

Uma Promise representa um valor que pode estar disponível agora, no futuro ou nunca. Ela é usada para trabalhar com operações assíncronas e é resolvida (com sucesso) ou rejeitada (com falha). Uma vez resolvida ou rejeitada, uma Promise entra em um estado final e não pode mudar.

Exemplo Prático:

Imagine a necessidade de leitura de dados de um arquivo de forma assíncrona:
Nesse contexto, ao finalizar a leitura do arquivo deve exibir seus dados ao usuário.

const readFileAsync = (filePath: string): Promise<string> => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, "utf-8")
      .then((data) => resolve(data))
      .catch((error) => reject("Erro ao ler o arquivo: " + error.message));
  });
};

readFileAsync("./assets/arquivo.txt")
  .then((content) => console.log("Conteúdo do arquivo:", content))
  .catch((error) => console.error("Erro:", error));

🌀 Observables:

Imagine o caso de uso onde novas notificações recebidas devem ser renderizadas ao usuário sem a ação de solicitação:
Nesse contexto, os dados exibidos estão reagindo a novas entradas de notificações.

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { NotificationService } from './notification.service';

@Component({
  selector: 'app-notification-list',
  template: `
    <div *ngFor="let notification of notifications">
      {{ notification }}
    </div>
  `,
})
export class NotificationListComponent implements OnDestroy {
  notifications: string[] = [];
  private subscription: Subscription;

  constructor(private notificationService: NotificationService) {
    this.subscription = this.notificationService.notifications$.subscribe(
      notification => this.notifications.push(notification)
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Tempo de Vida:

Uma Promise representa um único valor no tempo, resolvido ou rejeitado, logo após sua resolução a Promise é encerrada.
Um Observable representa uma sequência de valores ao longo do tempo, observable irá reagir às alterações até que sua inscrição seja cancelada.

Manuseio de Erros:

Uma Promise lida com erros através do método .catch() e do segundo argumento de .then().
Um Observable tem funções de callback específicas para sucesso, erro e conclusão.

Único vs. Múltiplo:

Uma Promise resolve ou rejeita uma vez
Um Observable pode emitir vários valores ao longo do tempo.

Resumo:

Use Promise quando precisar de um valor único no futuro.
Use Observable quando precisar de uma sequência de valores ao longo do tempo, como eventos ou stream de dados contínuos.

Simplificando a Escolha

Quando usar Promises?

Para operações assíncronas únicas.
Quando você espera um resultado no futuro.
Situações mais simples de assincronia.

Quando usar Observables?

Para lidar com fluxos contínuos de dados.
Eventos e situações onde ocorrem múltiplas emissões de valores.
Programação reativa e situações mais complexas de assincronia.

Comparação e Conclusão:

Ambas as abstrações têm suas próprias forças e casos de uso.

Em resumo, Promises são como uma promessa única de que algo acontecerá no futuro, enquanto os Observables brilham em cenários onde você precisa lidar com fluxos contínuos de dados. A escolha entre eles dependerá do contexto específico do seu código.

A gestão eficiente de operações assíncronas é crucial no desenvolvimento web moderno. Com o conhecimento claro das diferenças entre Promise e Observable, os desenvolvedores podem escolher a abordagem mais adequada para cada situação. Seja para promessas pontuais ou fluxos contínuos, ambas as abstrações são ferramentas poderosas no arsenal do desenvolvedor JavaScript.

Link para projeto no GitHub

Forem: Diego Ceccon - Diguya