promise-observer.js

promise-observer.js

function RenderAndOrderByName() { console.log('Ordenado por nomes') }
function RenderAndOrderByAge() { console.log('Ordenado por idades') }

// Retorna uma Promise
function getUsers() {
  // Apenas faz um request para uma lista de users,
  // a ordenação é feita no client
}

// Depois que a promise terminar, ordena eles por nome.
getUsers().then((data) => RenderAndOrderByName(data))

// Opa... o usuário mudou de ideia, agora é pra ordenar por idade.
// A promise ainda não terminou, então quando ela terminar eu devo
// executar apenas o RenderAndOrderByAge e não ordenar mais por nome (RenderAndOrderByName)

// Ou seja, cancelar o comportamento anterior e adicionar um novo
// aproveitando o mesmo request e sem ter que guardar nenhum estado

// O setTimeout é apenas para simular que o usuário mudou de ideia após um tempo
// mas antes da requisição ser finalizada.
setTimeout(() => {
  getUsers().then((data) => RenderAndOrderByAge(data))
}, 100)

// Para resolver isso com aquelas restrições vai ser preciso um workaround bem grande,
// porém você pode combinar Promises com Observables e resolver essa tarefa de
// forma muito simples:

const promise$ = Rx.Observable.fromPromise(getUsers())
const byName = promise$.subscribe((data) => RenderAndOrderByName(data))

setTimeout(() => {
  byName.dispose()
  const byAge = promise$.subscribe((data) => RenderAndOrderByAge(data))
}, 100)