Iteradores assíncronos vs geradores assíncronos em JavaScript

Iteradores assíncronos vs geradores assíncronos em JavaScript
Você pode se encontrar em uma situação em que é necessário processar imediatamente alguns eventos seqüenciais, em vez de esperar até que todos os eventos sejam gerados, por exemplo, recebendo dados em uma rede em que um pacote é buscado de cada vez. Em tal situação, Bibliotecas JavaScript como Rxjs pode ajudar a lidar com o dados assíncronos; No entanto, eles também colocam adicional a sobrecarga sobre a complexidade do código e o esforço cognitivo necessário para dominá -los.

Em javascript, Iteradores assíncronos e Geradores assíncronos Ofereça a mesma funcionalidade que pode ser efetivamente implementada usando as primitivas da linguagem JavaScript. Então, por que não escolher uma solução simples em vez de se colocar em outra confusão?

Este post discute iteradores assíncronos versus geradores assíncronos em JavaScript junto com exemplos adequados. Então vamos começar!

Iteradores em JavaScript

Em JavaScript, “Iteradores”São usados ​​para acessar estruturas de dados síncronas, como matrizes, mapas e conjuntos. Eles são baseados principalmente no “próximo()”Método, que compreende duas propriedades:“próximo" e "valor”:

  • O "valorPropriedade do próximo() o método indica o valor atual na sequência de iteração.
  • O "feitoPropriedade do próximo() O método representa o status de iteração, onde “falso”Indica que o processo de iteração está concluído e“verdadeiro”Significa que a iteração está incompleta.

Agora, verificaremos o funcionamento dos iteradores em JavaScript com a ajuda de um exemplo.

Exemplo: usando iteradores em javascript

Vamos criar um “números“Objeto com duas propriedades:“começar" e "fim”. Então, vamos adicionar um “capacidade de iteração" para o "números”Objeto utilizando o“Símbolo.iterator ()”Método.

O "Símbolo.iterator ()”O método será invocado uma vez, no início do“para de”Faça um loop e retorna um objeto iterável. Depois de executar esta operação, o “para de”O loop acessará o objeto iterável e buscará os valores na sequência de iteração:

Deixe números =
Iniciar: 1,
Fim: 4,
[Símbolo.iterator] ()
retornar
Corrente: isso.começar,
isto: isso.fim,
próximo()
se este.atual <= this.last)
retornar feito: false, valor: este.atual ++;
outro
return done: true;


;

;

O acima mencionado, “próximo()”O método será invocado e retornará o“valor”Como objeto:

para (deixe o valor dos números)
alerta (valor);

Escreva o código fornecido na janela do console e execute -o:

Nós iteramos com sucesso sobre cada elemento do “números”Objeto que pode ser visto no seguinte GIF:

Como mencionado anteriormente, os iteradores javascript regulares podem ajudá -lo a iterar sobre os dados síncronos. E se os valores vieram de forma assíncrona por causa de qualquer atraso? Nesse cenário, você deve implementar o Iteradores assíncronos em javascript.

Iteradores assíncronos em JavaScript

Os iteradores assíncronos estão incorporados no ES9 para lidar com as fontes de dados assíncronas. Funciona semelhante ao iterador regular, exceto que o “próximo()”Método em um iterador assíncrono retorna um“Promessa"Que resolve o"valor" e "feito”Propriedades valores de um objeto.

Converta o iterador regular em iterador assíncrono em JavaScript

Se você deseja converter um iterador regular em um iterador assíncrono, siga as instruções abaixo do rumo:

  • Em vez de usar o “Símbolo.Iterator ()”Método, utilize“Símbolo.Asynciterator ()”.
  • Forçar o “próximo()”Método para retornar um Promessa e adicione um “assíncrono”Palavra -chave com ele como:“assíncrono próximo ()”.
  • Por fim, o “para aguardar ... de”O loop pode ser usado para iterar sobre um objeto, em vez do“para de" laço.

Exemplo: iteradores assíncronos em javascript

Agora, converteremos o iterador regular definido no exemplo anterior para iteradores assíncronos seguindo as regras especificadas.

Para esse fim, substituiremos o “Símbolo.Iterator ()" com o "Símbolo.Asynciterator ()”Método. Então, vamos adicionar a palavra -chave “assíncrono" antes de o "próximo()”Método. Usando "aguardam" no "próximo()”O método definirá o tempo para cumprir a promessa depois de“2”Segundos:

Deixe números =
Iniciar: 1,
Fim: 4,
[Símbolo.Asynciterator] ()
retornar
Corrente: isso.começar,
isto: isso.fim,
assíncrono próximo ()
aguarda (resolve => setTimeout (Resolve, 2000));
se este.atual <= this.last)
retornar feito: false, valor: este.atual ++;
outro
return done: true;


;

;

Para iteração sobre um objeto iterável assíncrono, o ““para aguardar ... de”O loop será utilizado da seguinte maneira:

(async () =>
para aguardar (deixe o valor dos números)
alerta (valor);
) ()

A saída exibirá os valores iterados na caixa de alerta após um atraso de dois segundos:

A essa altura, você entendeu o funcionamento de iteradores assíncronos. Agora, seguiremos em frente e aprenderemos sobre Geradores assíncronos em javascript.

Geradores em javascript

Os iteradores em JavaScript são bastante úteis; No entanto, eles precisam de programação cuidadosa para realizar sua funcionalidade esperada. O Função do gerador de javascript é outra ferramenta poderosa que permite definir um algoritmo iterativo com a ajuda de um único “não contínuo”Função.

Inicialmente, uma função de gerador não executa seu código quando é chamado; Em vez disso, ele retorna um tipo específico de iterador conhecido como “Gerador”. A função do gerador pode ser invocada quantas vezes for necessária e, em cada chamada, retorna um novo “Gerador,”Que pode ser iterado uma vez.

Para escrever a função do gerador, o “função*”A sintaxe é usada. Esta função também compreende um “colheita”O operador que faz uma pausa na execução da função do gerador até que o próximo valor de um objeto seja solicitado.

Exemplo: Usando geradores em javascript

Vamos definir um “gerador”Função que retorna os valores de um“ponto de partida" para "endingpoint”Usando o“colheitaOperador. O "*”Adicionado com o“função”Palavra -chave indica que“gerador()”É uma função de gerador, não uma função regular normal.

Função* gerador (startingpoint, endingpoint)
para (vamos i = startingpoint; i<= endingPoint; i++)
rendimento i;

Na próxima etapa, invocaremos o “gerador()”Função que retorna um gerador armazenado no“x”Objeto:

Seja x = gerador (1, 5);

Por fim, para iterar sobre o “x”Gerador, usaremos o“para de" laço:

para (const num de x)
console.log (num);

A execução do programa fornecido mostrará os valores iterados:

Se você deseja recuperar resultados baseados em promessa do “Gerador“, Você tem que usar“Gerador assíncrono”No programa JavaScript.

Geradores assíncronos em javascript

Gerador assíncrono em JavaScript funciona semelhante à função do gerador, exceto que o “próximo()”Método no gerador assíncrono retorna um“Promessa"Que resolve o"valor" e "feito”Propriedades valores de um objeto.

Converter a função do gerador em iterador assíncrono em javascript

Siga as instruções abaixo para converter uma função de gerador em um iterador assíncrono em JavaScript:

  • Usar "assíncrono" antes de o "função*Palavra -chave.
  • Em vez de um "valor","colheita"Deve retornar um"Promessa”.

Agora, mostraremos o procedimento prático para converter uma função de gerador em geradores assíncronos em javascript.

Exemplo: geradores assíncronos em javascript

Primeiro de tudo, adicionaremos o “assíncronoPalavra -chave antes de definir o “assíncreada ()Função assíncrona. A assíncelidade () produz um “Promessa”Que será cumprido em um segundo:

ASYNCFUNCTION* ASYNCSENCENCIMENTO (SARIGETO, ENDINGPOINT)
para (vamos i = startingpoint; i
setTimeout (() =>
resolver (i);
, 1000);
);

Por último, "para aguardar ... de”O loop é usado para iterar e devolver o gerador assíncrono:

(async () =>
Seja x = assíncrono (1, 5);
para aguardar (deixe num de x)
console.log (num);

) ();

Este programa JavaScript retornará valores de “1" para "5”Enquanto faz uma lacuna de“um" segundo:

Nós fornecemos as informações essenciais relacionadas a Iteradores assíncronos e Geradores assíncronos. Ambos podem ser usados ​​para iterar os dados assíncronos em JavaScript; Pode ser um desafio para iniciantes manter a lógica interna ou a definição dos iteradores assíncronos, enquanto os geradores assíncronos oferecem um mais eficiente e menos propenso a erros maneira de utilizar iteradores. Também esconde o Complexidade do iterador e torna o código conciso e legível.

Então, recomendamos você Use geradores assíncronos Para lidar com iterações relacionadas à coleta de dados assíncronos.

Conclusão

Iterador assíncronoareia Geradores assíncronos são utilizados para iterar sobre os dados, fornecidos após um certo período de tempo. Os iteradores assíncronos executam o “Símbolo.Asynciterator ()”Método para retornar um“iterador”, Enquanto os geradores assíncronos retornam um tipo especial de iterador“Gerador”Por si só, que pode ser usado sempre que a iteração é necessária. Este artigo discutiu iteradores assíncronos e geradores assíncronos em JavaScript.