Observável e Prometido em Angular

Neste artigo, discutiremos Observable e Promise em Angular com a ajuda da implementação prática passo a passo.

Agenda

• Síncrono Vs Assíncrono
• Observável Vs Promessa

• No processo síncrono, várias tarefas são executadas uma após a outra, o que significa que a segunda tarefa está aguardando a conclusão da primeira tarefa. Nesse caso, o thread precisa aguardar antes de passar para outra tarefa.
• Outro lado, no processo assíncrono, existem vários processos executados simultaneamente, ele não aguardará a conclusão da tarefa anterior. Ele apenas passará para a próxima tarefa e iniciará a execução.

Valores de emissão

var observable = new Observable(res => {
      res.next("Hello Piyush");
      res.next("Hello Vivek");
      res.next("Hello Rajesh");
    });
    observable.subscribe(console.log)

    //Output --> Observable can emmit multiple values
    //Hello Piyush
    //Hello Vivek
    //Hello Rajesh

    var promise = new Promise(res => {
      res("Hello Piyush");
      res("Hello Vivek");
      res("Hello Rajesh");
    });
    promise.then(console.log)

    //output
    //Hello Piyush --> Promise will emit only single values that's why other two values are not emmited.

var observable = new Observable(res => {
      res.next("Hello....");
    });
observable.subscribe(console.log) //Whenever subscribe observable then only it will emmit values beacuse it is lazy load.

//Output
//Hello....

var promise = new Promise(res => {
      console.log("Promise start executing..."); //In console can see this output before calling promise it will initialized on creation and eagerly load.
      res("Hello....");
    });
//Call promise
promise.then(console.log)

//Output
//Promise start executing...
//Hello....

//Async Promise
var promise = new Promise(res => {
      console.log("Start Executing...");

      res("Hello...");

      console.log("Execution End...");
    });
promise.then(console.log)

//Output
//Start Executing...
//Execution End...
//Hello...


//Async Observable
var observable = new Observable(res => {
      console.log("Start Executing...");
      setTimeout(() => {
        res.next("Hello Piyush");
        res.next("Hello Vivek");
        res.next("Hello Rajesh");
      })
        , 1000
      console.log("Execution End...");
    });
observable.subscribe(console.log)

//Output
//Start Executing...
//Execution End...
//Hello Piyush
//Hello Vivek
//Hello Rajesh

//Sync Observable
var observable = new Observable(res => {
      console.log("Start Executing...");
      res.next("Hello Piyush");
      res.next("Hello Vivek");
      res.next("Hello Rajesh");
      console.log("Execution End...");
    });
observable.subscribe(console.log)

//Output
//Start Executing...
//Hello Piyush
//Hello Vivek
//Hello Rajesh
//Execution End...

Em alguns casos, precisamos cancelar a assinatura do observável, se necessário, porque ele é executado em segundo plano e, às vezes, cria um problema de vazamento de memória. É por isso que precisamos lidar com esse cenário.

//observable
    const observable = new Observable((res) => {

      let count = 0;
        setInterval(() => {
          count = count + 1;
          res.next(count);
        }
          , 1000)
    })

//subscribe the observable
    this.subscription = observable.subscribe(ele => { console.log(ele) })

//unsubscribe the observable
    setTimeout(() => {
      this.subscription?.unsubscribe();
    }
    ,12000)

Verifique o link abaixo relacionado à documentação oficial para entender mais sobre o RxJS

https://rxjs.dev/guide/overview

Link do GitHub

https://github.com/Jaydeep-007/ObservableAndPromiseDemo/tree/master

Conclusão

Neste artigo, discutimos a diferença entre Promise e Observable com alguns exemplos práticos.

Feliz aprendizado!