Entendendo as Diferenças: Promises vs. Observables em JavaScript 🚀
Tags: javascript, webdev, beginners, programming
Published: 2023-12-09 02:30:38

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.

```javascript
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.

```javascript
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](https://github.com/DiguyaDeveloper/ceccoff-promise-vs-observable-article)