Press "Enter" to skip to content

Using async generators to stream data in JavaScript


mattina in questo video andiamo a
guarda come puoi usare un sincrono
i generatori per lo streaming dei dati penso che a
generatori sincroni è uno dei
le cose più interessanti per atterrare in JavaScript e
Penso che abbia enormi implicazioni su come
programmiamo ma è anche molto
parti in movimento così voglio che ci ripensiamo
su come una serie di episodi che ci ha portato
qui se vuoi guardarti dall’inizio
c’è un link nell’episodio
descrizione nel primo episodio abbiamo solo
guardato il concetto di un iteratore noi
abbiamo parlato di come possiamo iterare qualsiasi cosa
con cose come il ciclo for perché
forniscono un iteratore e Ray
fornisce un iteratore e gli argomenti
oggetto fornisce un iteratore e possiamo
anche creare i nostri oggetti personalizzati che
fornire un iteratore in modo che tutto possa
scorrere su di esso
nell’episodio successivo guardammo
generatori che è un modo per noi
creare questi iteratori in un altro
sintatticamente più zuccheroso modo più terso così
i generatori stessi non sono come alcuni
speciale concetto magico alla fine loro
solo produrre un iteratore, quindi non lo facciamo
bisogno di generatori per produrre iteratori noi
può anche farli a mano se vogliamo
poi nell’episodio successivo abbiamo parlato
su un iteratore sincrono e a
iteratore sincrono è proprio come un
normale iteratore è solo che si tratta
con promesse quindi può andare e piace
ogni volta che chiami dopo può andare a prendere un
nuovo elemento sulla rete, ma cosa io
non riescono a fare nell’ultimo episodio è quello di
spiega chiaramente perché e quando vuoi
voglio usare un iteratore sincrono
perché avevo venduto il concetto
di un iteratore prima come sai come
per fare una cosa personalizzata che puoi
iterare sopra ma negli iteratori asynch
esempio ho usato un database falso che solo
preso un paio di file e un sacco di
la gente ha chiesto nel commento bene
e un array è già iterabile
già lavora nel ciclo for per un massimo
ciclo continuo
perché non posso semplicemente fare promesse affatto
queste righe del database e poi solo restituire
la promessa di all’interno di quella risorsa per
una matrice e quindi scorrere su quella
qual è il punto di utilizzo e
sincronizzare
Penso che iterable sono così felice di questo
la domanda è stata posta mi piace molto quando
le persone mettono in discussione le nuove tecnologie
e chiedendo come mai perché questo esiste
abbiamo questo a cosa serve?
questo e solo non usare le cose
quindi, senza pensarci, in questo video
stanno per usare un esempio dove sono un
matrice sarebbe come completamente
struttura dei dati impossibile da usare così
array che un po ‘come una scatola o simile
a lungo lo puoi immaginare come un insieme di
scatole che sono incollate insieme di limitato
lunghezze in alcune lingue
lunghezza limitata in alcune lingue voi
può piacere semplicemente incollare nuove scatole sopra
loro ma ma è come ho detto una scatola e
poi metti le cose all’interno dell’array
di queste piccole scatole e sono lì
la limitazione dell’array è che tu
o ottieni tutto o niente se ne hai uno
API di alcuni database o come alcuni file
lettore o qualcosa e basta chiamare
leggere il file e che in qualche modo ti dà un
array che significa che tutte le righe
devono essere letti
ottieni tutto in una volta che potrebbe
va bene che questo è un modo molto semplice di
ragionando su come un file che ho appena letto
le file vedrò la rosa che ho letto
tabella degli utenti ottengo tutti gli utenti che ora
avere gli utenti che posso scorrere su di loro
grande voglio dire che è incredibile che è
semplice perché non usare sempre un array
immagina che l’array sia davvero grande
cosa intendi per “grande”?
centomila file perché è così
niente a un array come quello
trasferito molto velocemente anche a
connessione mobile e come anche una cella
il telefono può gestire 100.000 righe in un file
la matrice è molto simile ai computer
davvero potente anche i più piccoli sì
è vero
i computer sono super veloci e lo sono
solo diventando sempre più veloce tutto il
tempo ma una cosa che cresce anche
più veloce della velocità e delle prestazioni di
i computer sono le serie di dati che noi
devo gestire così voglio che tu pensi
per questo per quando si pensa ad asynch
Generatori Ho bisogno che tu pensi oltre
come piccoli set di dati come 100.000
100.000 file perché non è così
grande voglio che pensi che 30 gigabyte I
voglio che tu pensi 100 cose di gigabyte
che non possono essere contenuti nella memoria non è possibile
leggere tutto in una volta anche in
futuro prevedibile e anche quando arriveremo
ai computer che hanno 100 gigabyte di
RAM poi ci hanno intenzione di avere insiemi di dati
che sono solo diversi terabyte di
i dati e persino come un set di dati potrebbero persino
essere nella logica nera infinita e in questo
caso ho intenzione di usare la cosa che io
può il set di dati che posso pensare
quello è il più vicino all’infinito e questo è
tutte le immagini di gatti nel mondo tutto
i gattini e questo è dove il
il concetto di un flusso entra in esso
qualcosa che abbiamo chiesto come a
parte molto piccola dei dati che abbiamo richiesto
l’inizio di come abbiamo chiesto l’inizio
di una corda e poi iniziamo a tirare
la corda non chiediamo il tutto
corda in una volta così la parte interessante
sul concetto di un iteratore che
di nuovo ricorda che è solo un oggetto
che possiamo chiedere il prossimo oggetto
è costantemente che può esprimere
un array perché un array è proprio questo
funziona in quell’interfaccia è mentre noi
avere tutto in memoria funziona correttamente
applica l’interfaccia di chiedere il
prossima cosa per la prossima cosa per il
la prossima cosa, ma la NS un iteratore può
anche essere usato per esprimere un flusso che abbiamo appena
chiedo costantemente la prossima cosa ma
sotto il cofano non ha davvero
tutte le cose ancora richieste
le cose come andate e questo è il potere di
di un flusso e possiamo usare un iteratore
per esprimere quello o esprimere quello è
forse il modo sbagliato di metterlo a
lo stream può essere conforme all’iteratore
protocollo quindi penso che gli iteratori siano
fondamentalmente un modo per noi di esprimere
i flussi e lo scopo dei flussi è così
che possiamo affrontare le cose come loro
vieni così potrebbe essere davvero enorme
set di dati o solo set di dati che sono simili
un paio di megabyte ma tu vuoi
per mostrarli gradualmente nell’interfaccia
in modo che l’utente non debba aspettare
diamo un’occhiata ad un codice tutto a posto
quindi questa è la coda di età osservabile che è
un po ‘come un parco giochi JavaScript
è dannatamente bello, lo uso a
lotto per la prototipazione di ciò che vedi qui
un flusso di tutti i gatti su Flickr che
è un servizio fotografico che era enorme nel
il giorno ma poi Yahoo lo ha comprato e
distrutto ma è ancora sbagliato e così
ha un’API davvero bella per la falciatura
roba del genere vedi qui che noi
avere la siesta per un ciclo di peso che
abbiamo guardato nell’ultimo episodio e questo
per ogni Earl di gatti
produce semplicemente HTML che è questo questo
è solo un tag immagine
davvero e poi vediamo qui che ogni
tempo noi
la malattia allora osservabile la sostituisce
pensa a questa cosa come a un blocco
qui come ed è fondamentalmente su un lavandino
generatore è entrambi e una funzione di sincronizzazione
e un generatore quindi ha la capacità
di entrambi in attesa e cedimento è a
entità super super potente davvero ma
non perdere troppo tempo a capire
questa linea non è terribilmente importante
per questo video come potremmo avere
questo potrebbe essere stato come lo sai
come rendere qualsiasi cosa come quella è quella
non lo scopo di questo video
cosa interessante è cosa diavolo
è questo gatto dove è dove è
venendo da ho intenzione di mostrarvi cosa
i gatti sembrano ma voglio sottolineare qui
che non ti mostro niente di nuovo come in
l’ esempio di un editor di sincronizzazione che abbiamo visto
esattamente tutte le parti mobili che
vedremo qui, ma l’esempio
sembrerà un po ‘più intimidatorio
perché sta utilizzando un vero servizio API
e c’è il leggermente più commovente
parti e complicazioni legate a questo
ma è fondamentalmente come l’API di recupero e
i generatori asincroni che stai andando
vedere così guardando i gatti qui
è solo crea sfarfallio di queste chiamate
ricerca tag
gatti o come se fosse in possesso di una ricerca di tag flicker
con i gatti con le corde tutto a posto
bene stiamo crollando e noi guardiamo
a che cosa è la ricerca del tag flicker
sembra che ho bisogno di ridurre il font
taglia leggermente lì apriamo questo e
vediamo qui che è un grande
funzione vediamo prima questa cosa
ricerca di tag flicker questo non ha nulla a
fare con il loro con iteratori questo è
solo una funzione che restituisce restituisce
una promessa che si risolve in una serie di
urls alle immagini che rappresentano una pagina
risultati di una ricerca di tag su flickr wow
quello è boccone ora è questo è
basta chiamare l’API di Flickr per una ricerca
gli diamo un tag ma lo diamo anche a
pagina perché perché fondamentalmente questo
risultato set di gatti che è solo milioni
e milioni di cattolici probabilmente
miliardi quindi non possiamo ottenere tutto al
Allo stesso tempo dobbiamo dargli una pagina e
ogni pagina è di 100 gatti, quindi vedi qui
chiamiamo semplicemente fetch dove ne conosci qualcuno
Earl qui che è definito nel Flickr
API e quindi analizziamo il Jason
sappiamo che il Giasone sembra così
ha questa strana struttura che noi abbiamo la foto
un array e poi per ogni foto noi
estrai la costruzione di un’immagine Earl
questo è come il CD sui tuoi occhi
su Flickr siano costruiti in modo che cosa questo
ci dà è un piccolo pezzo del
enorme risultato di ricerca che è tutto il
gatti sull’interweb oh, va bene su Flickr
questo è il più vicino che ti capita andiamo
scorri un po ‘ per arrivare al
carne dell’iteratore stesso o del
iterabile che sono i gatti che vediamo qui
la funzione che è il tag Flickr
ricerca e che accetta un tag che restituisce
un oggetto che ha solo un metodo
è chiamato simbolo punto un iteratore di sincronizzazione così
questo è abbastanza funky è un metodo che
usa questo simbolo come nome a meno che
CAPTCHA ma nome più preciso per questo
sarebbe una fabbrica di iteratori di sincronizzazione o a
sincronizzare l’iteratore perché così è
questo crea e affonda un traditore così
ancora una volta questo è ciò che il ciclo for sarà
chiama sotto il cofano e bene quando
inizia a chiamarlo
funzione per ottenere l’iteratore e vedere
quello che sta succedendo qui vede che tramonta
un paio di variabili qui da tenere
traccia della pagina in dixon e foto
indice perché sta andando a scorrere
queste cose crea anche una cache
perché perché
non fa questo iteratore non sta andando
per ottenere una foto alla volta perché io
sarebbe molto dispendioso perché il modo
il web funziona è che c’è una latenza
per ogni richiesta, quindi vogliamo essere
raggruppando le richieste un po ‘in questo modo
Io non sono un centinaio di immagini che sembra
tipo di ragionevole per avere solo un centinaio
in un momento, anche se non possiamo ottenere tutto
nel mondo alla volta ma ottenendo uno
in un momento che sarebbe un po ‘troppo
poco ma l’iteratore vogliamo
esporre non lo esponiamo come un unico oggetto
in un momento quindi creeremo un
cache sotto il cofano e ci hanno un a
buffer e questo è ciò che la cache è per
e abbiamo questa piccola cache piena
funzione helper qui che fa solo il
ricerca di tag flicker per qualsiasi tag noi
fornito e quindi prenderà il
foto qui e solo roba nella
variabile di cache sono variabili così
questa è la configurazione iteratore allora
restituisce l’iteratore di ritorno qui
e l’iteratore ha una funzione successiva
è lì che accade la magia e il
la prossima funzione aumenterà il
l’ indice delle foto sarà meno uno
dall’inizio ma poi lo farà
non bloccare Cheeta fino a quando non siamo su
0 andiamo a vedere se c’è un problema
e se c’è una cache se esiste
nella cache in questo caso non sta andando
per essere così va giù qui allora
ripristina l’indice fotografico su 0 e poi su di esso
incrementa l’indice della pagina in questo caso
l’indice della pagina è zero e ciò significa
che stiamo andando a finire in prima pagina
che è la prima pagina in e il
I risultati della ricerca su Flickr iniziano bene
uno non zero
chiama Phil Cash dove l’indice della pagina
e poi fa il ritardo qui per due
secondi lo sto facendo come questo ritardo
esiste per scopi dimostrativi in
questo caso perché altrimenti sarà solo
blaze Ruby queste immagini in un molto
modo fastidioso la funzione di ritardo è
solo una funzione che è fondamentalmente a
wrapper per il timeout impostato che fa semplicemente
promette solo restituisce una promessa
ciò si risolve dopo secondi, quindi questo
ritardare qui è solo una promessa
risolve dopo due secondi
ha deliberato torniamo un’iterazione
oggetto non abbiamo finito perché francamente
non avremo mai intenzione di ripetere
gattini questo è in gran parte un infinito
risultato impostato e quindi il valore sta andando
per essere il denaro in corrispondenza dell’indice foto in modo che il
il denaro è in pratica la pagina corrente
avevamo caricato in modo tale da farci arrivare per primi
gatto carica la prima pagina e dà
noi il prossimo il primo gatto quando chiamiamo
prossimo o per il prossimo giorno per le chiamate Bloop
la prossima volta colpirà questo
linea e vedrà che se ci
è un denaro e lo vedrà
c’è anche portato come c’è anche a
gatto all’indice fotografico che è zero
ma uno è il secondo gatto nel e
il risultato dell’indice delle foto così andrà a
basta fare questo ritardo artificiale e poi
lo restituirà che lo ha incassato
cat incassato perché ancora una volta ricordare che
i primi 100 gatti vengono memorizzati nella cache quindi
passa attraverso questo per 100 gatti e
allora sta per colpire questa linea è
andando a vedere che questo cache sta per
vedi che hey
questo ora siamo senza gatti e il gatto
avremo bisogno di incrementare e andare
alla pagina successiva e prendi quello così
poi va giù qui ripristina la foto
indice perché ora siamo indietro e inizio
e poi incrementa la pagina e poi
riempie il gatto con quella pagina e poi
stiamo tornando iterando nella prossima pagina
e poi continui così
ancora niente di questo è nuovo
hai visto tutto questo nel precedente
il video la differenza è che questo usa a
vera API invece di come una API falsa che
Ho creato per illustrare un punto lì
queste sono parti più mobili ed è
solo un esempio più intricato per questo
ragione ma non c’è una novità reale
concetti e questo è quello che è il
insieme del nostro esempio e sono tutti
risultati in questo flusso costante di gatti
in questo esempio abbiamo creato un
iteratore a mano ma possiamo anche usarlo
generatori per creare iteratori e noi
ho guardato che abbiamo guardato
come creare iteratori sincroni
usando generatori sincroni ma oggi
stiamo andando a refactoring manualmente
fatto a mano un raro sincronizzato e lo siamo
andando a crearlo usando una sincronizzazione
generatore e sta per soffiare il tuo
importa quanto più elegante diventa così
fammi espandere la ricerca di tag Flickr qui e
Ho intenzione di scrivere riscrivere questo bugger
come un generatore invece così sono
andando a commentare questo e afferrare questo
loop e con la tua funzione solo normale
funzioni appena inizia per iniziare
con noi iniziamo con il nostro progetto e lo siamo
andando a chiamare la ricerca di tag Flickr
e vogliamo prendere questo tag qui è
saranno i gatti e il secondo argomento
alla ricerca di tag Flickr è la pagina tre
chiamalo indice della pagina questa variabile no
esistono ancora creiamo ciò che effettivamente lasciamo
indice della pagina che cosa è un sincrono
restituisce una promessa come noi
puoi vedere qui, quindi abbiamo bisogno di volerlo
onda che è un peso e al fine di
usa la parola chiave await che dobbiamo fare
questa funzione penso bianco oh mio dio
Sto saltando in giro dispiaciuto per quello
mi dispiace per quello
ora una volta che abbiamo questo array vogliamo
scorrere su di esso
quindi facciamolo per Const Earl o questo
risultati che stiamo aspettando faremo
la roba ci sembra davvero utile
perché potrebbe essere fonte di confusione per noi
chiameremo questo array questo
questo ci darà una matrice così da allora
stiamo aspettando qui questo sarà il
matrice reale della pagina o forse come
forse i dati della pagina sono buoni
nominalo quindi una volta che abbiamo alcuni dati di pagina e
noi iterandoci sopra vogliamo cedere
non ti guarisci, questo è un gioco
ricorda come funziona il generatore
come questo è così che produciamo il
prossimo il prossimo oggetto o vuoi come quando
ci viene chiesto qualcosa come oh voglio
l’ elemento successivo quindi lo cediamo verso l’alto
e quindi interrompiamo il generatore perché
il generatore è una specie di possibile
funzione e quindi non continueremo come
il generatore non continuerà fino al
mondo esterno il consumatore esterno
ci chiama dopo che abbiamo finito
questo ciclo una volta che ci dimostreremo arriverà a
tutto sulla pagina nei dati una volta
siamo fuori dai dati nella pagina andiamo pagina
indice
basta incrementare quello che faccio H e X
più uno e poi questo e poi questo
generatore sta per finire che non lo facciamo
voglio che volessimo piacere solo
continua quindi ho intenzione di concludere questo in a
mentre
vero tendiamo a vedere in questi generatori
è un bel modello de vanilla
per i generatori e sì è così
in questo modo sembra così ora è solo
Continuerò, sì, lo farà
continua, non c’è davvero fine
condizione qui come ipoteticamente noi
potrebbe finire le pagine ma non lo è
succederà
in questo caso di applicazioni come i gatti
infinito e ora ho scritto davvero
l’intera cosa sanguinosa
dai un’occhiata a questo sì, tu vedi come
un piccolo codice questo è paragonato a questo
in realtà Gesù ho bisogno di ridurre il font
dimensione per mostrare questi affiancati così questo
è lo stesso di quello che non abbiamo aggiunto
il ritardo qui ma questo è l’unico
differenza è semplicemente incredibile quanto
codice di cui possiamo sbarazzarci avendo noi il
possibilità del generatore è carina
figo in realtà è fare in modo che
funziona, lasciami correre questo oh mio dio boom
la parola chiave yield è meritata quale è
ovviamente oh ovviamente ovviamente
mi dispiace per il fatto che non possiamo usare la resa
perché questa funzione qui non è a
generatore, ma abbiamo bisogno di farlo a
generatore altrimenti non è permesso di
usa il campo così womp
ora è un generatore, basta eseguirlo
di nuovo e ora vedi qui che oh
ci sono un sacco di gatti ed è una specie di
jumpy e roba diventa davvero
confuso e questo è perché non abbiamo
ha aggiunto il piccolo ritardo artificiale
era sugli dura come qui questi così
Aggiungerò che non tu ed esso qui
fammi effettivamente aumentare la dimensione del carattere
di nuovo così che gli utenti mobili possano effettivamente
vedere qualcosa andare
attendere un ritardo o eseguirlo di nuovo e
ora vedi che senti che hmm ora è così
caricare i gatti e piace così
modo sequenziale meglio scorrere verso il basso e
basta guardare su quanto estremamente elegante questo
è questo è solo così fresco e il gioco è fatto io
Spero di aver linkato questo notebook in
descrizione in modo da poterla forgiare e
giocare con te è molto
importante per utilizzare effettivamente queste cose
al fine di comprendere loro non si può
guardami , è solo troppi
parti in movimento e cose che devi fare
sperimentare con loro da soli in a
per afferrare pienamente quelli che dicevano
non rimanere bloccato sulla tua stessa confusione
essere previsto e il tuo compagno
i programmatori sono utili se ne hai uno
domanda postata nei commenti in basso
di seguito o se si desidera supportare lo spettacolo
un po ‘e diventa un mecenate
accesso al forum Fun Fun che è
anche un posto fantastico per chiedere aiuto
come me ne vado molto spesso e il
le persone più rotonde sono così amichevoli e così
bello e veramente bravo a spiegare
le cose quindi assicurati di usarlo se tu
sono un mecenate, ce ne sono così tanti
implicazioni con i generatori asincroni
li stiamo esplorando in
episodi futuri
perché se non ti piace fatto il
connessione te stesso, ma potresti notare
che ora sono integrati i flussi
JavaScript ora abbiamo questo fantastico
sintassi per esprimere flussi in uno standard
modo così questo effettivamente fa quattro
iteratori essenziali e e il
i generatori fanno effettivamente ciò che mi piace
le promesse native hanno fatto come noi
questi amore un po ‘prima del nativo
promesse integrate in JavaScript che avevano
biblioteche come Cue e Blue Bird ma ora
ci piace questo modo standard di fare
flussi che significa che possiamo avere
librerie che operano su quei flussi
e possiamo combinare ciò che è giusto
incredibile non dobbiamo usare questa morale
effettuare le librerie di stream come Highland o
Bacon
il nostro ex possiamo semplicemente usare questo built-in
cose e poi basta prendere poco
librerie che trasforma e semplicemente
usa costruire le nostre funzioni e poi
quelle cose saranno utili a tutti
progetti perché tutti hanno a che fare
intervalli asincroni che è sorprendente
quindi penso che a seconda di cosa
domande alle persone che potremmo fare
ordine superiore penso che la prossima volta regoli
come le funzioni che creano come gli altri
intervalli da iterabili come mappa per
intervalli o come possiamo vivere come
filtro i gatti o qualcosa che non faccio
sai che hai appena visto un episodio di
Fun fun function che normalmente cerco di fare
questi un po ‘più corti di questo
ma avevamo bisogno di passare molto tempo
perché e anche mostrare un esempio del mondo reale
su entrambi prendi tempo che produco
questo spettacolo ogni lunedì mattina Oh 800
GMT quindi sintonizzati la prossima settimana ma lo farai
dimenticalo quindi puoi fare clic su iscriviti
in modo da non perdere è
o se ti senti vivace puoi solo
guardare un altro episodio in questo momento io sono MPJ
fino al prossimo lunedì mattina resta curioso
Please follow and like us: