RxJS receitas: ‘forkJoin’ com o progresso de conclusão para o volume de solicitações de rede Angular

Como acontece muitas vezes, para mim — esse post é apenas um prolongamento da minha StackOverflow atividade:-).

Pergunta:

existe uma maneira de reunir uma lista dos observáveis em conjunto para obter resultados acumulados como forkJoin não, mas obter algum tipo de progresso, enquanto que termina?

uma boa tarefa para criar a função RxJS personalizada. Vamos implementá-lo!

Vamos dar uma olhada na documentação oficial:

forkJoin(…fontes: qualquer): Observáveis<qualquer>

Aceita um Array de ObservableInput ou um dicionário Object de ObservableInput e retorna um Observable que emite uma matriz de valores na mesma ordem como o passado matriz, ou um dicionário de valores da mesma forma como o passado dicionário.

em outras palavras, forkJoin for Observables funciona da mesma maneira que Promise.tudo funciona para promessas.

aqui está um diagrama de mármore:

o possível caso de uso para ele está executando muitos pedidos de redes paralelas-por exemplo, obtendo alguns detalhes usersList (se a API suporta apenas por usuário fetch).

aqui está um exemplo:

link do trecho

aqui está um link do codepen para jogar com.
funciona bem, mas e se precisarmos saber alguma informação intermediária, como quantos pedidos já estão resolvidos? Com a implementação atual do forkJoin, é impossível, mas podemos criar a nossa própria versão dele ?.Muito bem, ordem do dia breve como deve funcionar este trabalho conjunto com o crescente:
saída:
1. Ele retorna ordem superior(HO) observável () que emite uma matriz de dois observáveis: .

<>Cópia
*Higher-order (HO) Observable - observable that emits other observables, so data flow should be handled with special flattening operators like mergeMap, switchMap, concatMap, etc... you can read more about it here and here.

2. porcentagem $ – emite porcentagem de conclusão (número);
3. finalResult $ – emite uma matriz final de valores no final (ou erro se algum argumento observável emitir valor de erro).
o uso preliminar se parece com isso:

link do snippet

detalhes da implementação:

  1. nossa função forkjointwrogress aceita uma matriz de observáveis e deve retornar de ordem superior observável.
  2. Este retornou Observáveis devem emitir valor (vamos usar de() para que)
  3. efeitos Colaterais será adicionado a cada item em uma matriz de argumento Observáveis para calcular a porcentagem de conclusão e emitir este valor com especial por cento$ (vamos usar finalizar operador para cálculo de porcentagem e usar o Assunto como porcentagem$).
  4. finalResult$ provides standard RxJS forkJoin result.
  5. resultado observável deve funcionar de forma independente para cada assinante (funcionalidade wrap com a função RxJS defer para fornecer uma execução limpa para cada assinante — você pode ler mais sobre este caso aqui).
  6. se alguns dos observáveis argumento emite erro – ele será propagado para finalResult $ assinantes.

Packtpub.com e preparei um curso RxJS inteiro com muitos outros detalhes de como você pode resolver as tarefas do desenvolvedor todos os dias com esta incrível biblioteca. Pode ser interessante para iniciantes, mas também contém tópicos avançados. Olha!

implementação

#1-2 aceitamos uma matriz de observáveis e devemos retornar observáveis de ordem superior com .

Ok, apenas uma pegada de nossa função de futuro:

trecho do link

Dado temos arrayOfObservables (nosso ajax observáveis), então vamos iterar sobre e adicionar pedido de lógica:

#3 Adicionando efeitos secundários argumento Observáveis e cálculo de percentuais.

aqui está o que temos:

link do snippet

adicionaremos mais funcionalidade aos observáveis de argumento na matriz. Nós iteramos sobre um array e aplicamos o operador finalize para cada observável.

finalize o operador espera até completações específicas observáveis, calculando então a percentagem de observáveis completos e emitindo o valor com percentagem$assunto.

#4 Vamos chamar forkJoin para a obtenção de um resultado final valor

snipper link

Ok, vamos por este código:
forkJoin obtém uma matriz de argumento observáveis, assina-los a todos e espera até que eles estão completos.
assim que um resultado estiver pronto — o operador tap emite o último valor percentual (100%) e conclui a porcentagem$ Subject (para evitar vazamentos de memória).
os resultados finais serão emitidos para os assinantes.

5 envolvendo toda essa função em ‘defer’

a função RxJS defer fornece nova instância observável (resultado de sua função de retorno de chamada) para cada assinante. Isso significa que cada um de nossos assinantes terá execução limpa (e contador = 0).

snippet link

vamos rever como ele funciona:

  1. temos uma matriz de observáveis (line1).
  2. Wrap result with RxJS defer to provide a clean run for each subscriber (line 3)
  3. Create counter to calculate the percentage of completion and instanciate percent$ Subject to emit percent value (lines 5-6).
  4. criamos uma nova matriz iterando sobre a matriz original e adicionando novas funcionalidades com finalize – calculando o valor percentual e emitindo-o se alguns dos observáveis forem concluídos. (linhas 8-15)
  5. ligue para Rx forkJoin e aplique tap operator para poder enviar porcentagem 100 quando forkJoin obtém um resultado final. Atribuir resultado a finalResult $ variável (linhas 17-22).
  6. retorna observável de ordem superior que emitirá .

Para embrulhar

Aqui está como isso funciona em um codepen:

forkJoinWithPercent

o Que ver com o uso Angular?Link para esta seção

esta função é publicada como um pacote npm também-RxJS-toolbox para que você possa usá-lo em seus projetos.

e aqui está uma demonstração Angular do Stackblitz que usa esse pacote para alimentar o valor percentual para carregar a barra:

em Angular

leitura adicional.

você pode ler mais sobre operadores RxJS usa casos aqui:

  1. “tente novamente vs repita “
  2. “RxJS: Gerenciando o estado do operador” por Nicholas Jamieson.
  3. “RxJS ‘repetir’ operador iniciante necromante guia”
  4. “Otimização notificações de vários usuários com RxJS”
  5. rxjs-toolkit — RxJS Diário Personalizado Operadores por Jason Awbrey.
  6. backoff-rxjs – uma coleção de operadores RxJS úteis para lidar com estratégias de backoff por Alex Okrushko.

como este artigo? Vamos manter contato no Twitter!

a partir da Seção 4 da minha equipe de avanços do curso de vídeo RxJS é revisada-então, se você já conhece o RxJS – você também pode encontrar algo útil para você: observáveis de ordem superior, antipadrões, agendadores, testes de unidade, etc! Experimenta!

*agradecimentos Especiais para Lars Gyrup Beira Nielsen, Nicholas Jamieson, Tim Deschryver e Michael Karén para rever este post e fazer muitas observações valiosas para torná-lo melhor!

discutir com a comunidade

Deixe uma resposta

O seu endereço de email não será publicado.