Conhecimento Básico de Tarefas e Schedulers

O que é Processamento Síncrono?

O processamento síncrono é executado imediatamente na ordem em que o código é escrito e não prossegue para o próximo processo até que o processo anterior seja concluído.

Exemplo

console.log('A');
console.log('B');
console.log('C');

// Saída:
// A
// B
// C

O que é Processamento Assíncrono?

O processamento assíncrono é um processamento que não é executado imediatamente, mas é executado após a conclusão do processamento síncrono atual. O processamento assíncrono inclui "macro tasks" e "micro tasks".

Macro Task

• Uma tarefa que é executada no próximo ciclo do event loop.
• Exemplos: setTimeout, setInterval, eventos do navegador

Exemplo de Execução

console.log('Início');
setTimeout(() => console.log('Macro Task'), 0);
console.log('Fim');

// Saída:
// Início
// Fim
// Macro Task

Suporte RxJS

• asyncScheduler
  • Usa setTimeout internamente
  • Funciona como uma macro task

import { of, asyncScheduler } from 'rxjs';
import { observeOn } from 'rxjs';

of('Olá')
  .pipe(observeOn(asyncScheduler))
  .subscribe(console.log);

// Saída:
// Olá

Micro Task

• Uma tarefa que é executada imediatamente após a conclusão da tarefa atual, mas antes do início da próxima tarefa.
• Exemplos: Promise.then, queueMicrotask

Exemplo de Execução

console.log('Início');
Promise.resolve().then(() => console.log('Micro Task'));
console.log('Fim');

// Saída:
// Início
// Fim
// Micro Task

Suporte RxJS

• asapScheduler
  • Usa Promise.resolve().then() internamente
  • Funciona como uma microtask

import { of, asapScheduler } from 'rxjs';
import { observeOn } from 'rxjs';

of('Oi')
  .pipe(observeOn(asapScheduler))
  .subscribe(console.log);

// Saída:
// Oi

Tarefa Síncrona

• Código normal a ser executado imediatamente.

Suporte RxJS

• queueScheduler
  • Parece ser síncrono, mas permite controle fino através de enfileiramento de tarefas.

import { of, queueScheduler } from 'rxjs';
import { observeOn } from 'rxjs';

of('Agora')
  .pipe(observeOn(queueScheduler))
  .subscribe(console.log);

// Saída:
// Agora

Resumo da Ordem de Execução

Exemplo de Código

console.log('1');

setTimeout(() => console.log('2 (setTimeout)'), 0);
Promise.resolve().then(() => console.log('3 (Promise)'));

console.log('4');

// Saída:
// 1
// 4
// 3 (Promise) 👈 Microtask
// 2 (setTimeout) 👈 Macrotask

Tabela de Correspondência de Tarefas e Schedulers RxJS

Tipo	Exemplo	Scheduler RxJS
Síncrono	Código normal	queueScheduler
Microtask	Promise.then, queueMicrotask	asapScheduler
Macrotask	setTimeout, setInterval	asyncScheduler