RxJS 6 ohne Mühe meistern

1. Einführung in den Kurs: Hallo, Maurice hier. Willkommen in dieser Klasse zum Mastern von RxJs 6, ohne ins Schwitzen zu brechen. Also, was werden wir in diesem Kurs einen Blick werfen? Nun, wir werden damit beginnen, welches Problem RxJs zu lösen versucht, und dann werden wir einen Blick auf RxJs und reaktive Programmierung werfen und wie das tatsächlich versucht, das Problem zu lösen. Wir werden einen Blick auf Observables werfen, einen der Hauptbausteine von RxJs. Wir werden einen Blick darauf werfen, was sie sind, verschiedene Möglichkeiten, sie zu erstellen, eigene benutzerdefinierte Observables zu erstellen, mit Subjekten, die eine Möglichkeit sind, Observables zu erstellen , und wir werden uns den Unterschied zwischen heiß und kalt ansehen Observables. Natürlich werden wir uns mit den Betreibern beschäftigen. Ohne Operatoren wäre RxJs nicht so nützlich. Wir werden also einen Blick auf das Ziel von Operatoren werfen, wie wir sie mit RxJS Marbles visualisieren können. Wir werden einen Blick auf viele der vorhandenen Operatoren werfen, nicht alle von ihnen, sie sind viel zu viele, und wir werden einen Blick auf das Erstellen benutzerdefinierter Operatoren für RxJs werfen. Wir werden einen Blick auf die Fehlerbehandlung werfen und wie Sie potenziell fehlgeschlagene Operationen wiederholen können, und natürlich werden wir einen Blick auf die Unit-Tests Ihrer Observables und Ihrer Operatoren werfen. Schließlich werden wir einen Blick auf eine Reihe von verschiedenen Szenarien werfen, in denen RxJs viel Sinn machen könnte. Dinge wie das Abrufen einer Anfrage aus dem Web auf einer periodischen Basis, Behandeln von Fehlern, wenn eine Anfrage fehlschlägt, es erneut ausprobiert und solche Dinge. Wir sehen uns im nächsten Video. 2. Persönliche Einführung: Hallo Maurice hier, und willkommen kommen Sie zurück zu diesem Kurs zum Mastern von RxJs 6, ohne Schweiß zu brechen. In diesem Video werden wir eine kurze persönliche Einführung machen, damit Sie wissen, wer ich bin. Mein Name ist Maurice de Beijer und ich bin ein unabhängiger Softwareentwickler und Trainer. Ich lebe in den Niederlanden, schöner Ort, vor allem im Frühjahr, mit vielen schönen Blumen wie diese Tulpen. haben ein paar schöne Strände, das ist Scheveningen, und wir haben unsere schöne Windmühle, speziell in den Sonnenuntergang so. All diese Bilder wurden innerhalb von 20 Kilometern von meinem Wohnort aufgenommen. Ich bin auch glücklich mit einer Frau und einem Sohn verheiratet. Seit 1995 bin ich unabhängiger Softwareentwickler und Instruktor. In der Tat gehen meine Entwicklertage weiter zurück als das, aber da wurde ich unabhängig, so vor einiger Zeit. Die meisten der wertvollsten Profis von Microsoft, ein MVP, eine jährliche Auszeichnung, die ich 14 Mal in Folge erhalten habe. Ich veröffentliche einen React Newsletter, wenn Sie an React Entwicklungen interessiert sind. In den Notizen finden Sie einen Link. Wir sehen uns im nächsten Video. 3. Das Problem: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs auf Master RxJs 6 ohne Schwitzen zu brechen. Was ist das Problem mit traditionellem Code? Lassen Sie uns in einen Code eintauchen, und schauen wir uns mal an. Ich habe eine kleine Beispielanwendung hier mit ein paar Knöpfen. Die meisten von ihnen tun noch nichts, nur der Clear Button tut es. Werfen wir einen Blick auf die Codes. Wir werden so ziemlich die gleiche Aktion mit einigen verschiedenen Artikeln hier tun. Wir fangen mit ein paar Nummern an. Wir werden einen Ereignis-Listener auf die Schaltfläche hinzufügen. Dann werden wir die Zahlen in eine andere Form verwandeln. Wir werden sie filtern, und wir werden die Ergebnisse auf den Bildschirm stellen. Verwenden Sie zunächst den Kartenoperator in einem Array, um von nur einer Zahl zu einem Objekt mit der Eigenschaft x zu wechseln, das die Zahl enthält. Dann werden wir den Filteroperator für ein Array verwenden, um nur die Objekte zurückzugeben, die einen x-Wert haben, der kleiner als sieben ist. Das sollte ein neues Array zurückgeben. Wir nennen es Daten. Lassen Sie uns das nun auf den Bildschirm stellen, damit wir das Ergebnis sehen können. Es gibt das resultierende Array von Objekten mit einem Wert. Ziemlich einfach. Lassen Sie uns dasselbe mit einem zeitbasierten Intervall tun. Wieder fügen wir einen Klick-Handler zur Intervallschaltfläche hinzu. Dieses Mal werde ich eigentlich fette Pfeilfunktionen verwenden, weil sie kürzer sind. Kein technischer Vorteil hier, nur etwas kürzer. Wir beginnen ein festgelegtes Intervall, und wir werden alle Sekunden feuern. Im Inneren wollen wir eine Zahl inkrementieren, also müssen wir diese außerhalb dieser Intervallfunktion speichern, damit wir sie inkrementieren und sich an den Wert erinnern können. Wir brauchen ein Array, um die Zahlen hineinzuschieben. Zuerst erstellen wir ein neues Objekt mit der Eigenschaft x, die die Zahl enthält. Wieder, genau wie zuvor, werden wir die Zahl erhöhen. Natürlich müssen wir filtern. Lassen Sie uns nach Zahl filtern, die kleiner als sieben ist. Natürlich wollen wir sicherstellen, dass unser Intervall sonst stoppt, es wird unbegrenzt laufen. Speichern wir das Handle und verwenden Sie ein klares Intervall, um es wieder laufen zu lassen. Wir müssen die Ergebnisse immer noch auf dem Bildschirm anzeigen. Natürlich müssen wir das Objekt immer noch in das Array schieben. Wenn ich nun auf die Intervallschaltfläche klicke, sollten wir sehen, dass die Zahlen jede Sekunde eins erscheinen. Da sind sie. Objekte mit den Zahlen kleiner als sieben. Wir erreichen das gleiche Ziel, aber der Weg ist ganz anders. Werfen wir einen Blick auf die Ajax-Anfrage. Ich gehe zur URL zum Ajax-API-Endpunkt, und das wird einen Witz zurückgeben, und wir werden die Länge des Witzes als Zahl verwenden. Wir beginnen mit der Abrufanforderung. Rufen Sie die URL ein. Dann müssen wir uns dazu entschließen, einen Down-Handler zu verwenden, der uns die Antwort gibt. Ich werde die Dinge einfach halten. Wir gehen nur davon aus, dass alles funktioniert und ich werde eine JSON-Funktion aufrufen, ohne zu überprüfen. Das sollte uns die Daten geben. Die Daten haben einen Wert, der den Witz haben wird. Wir nehmen die Länge von dem Witz. Sobald wir das Objekt haben, müssen wir immer noch filtern und auf den Bildschirm setzen, wenn es den Filter passiert. Ich werde hier tatsächlich einen Wert von 75 verwenden weil die meisten Witze länger als sieben Zeichen sein werden, wahrscheinlich jeder einzelne von ihnen. Mal sehen, ob die Ajax-Anforderungsschaltfläche funktioniert. Wir sehen einen Witz 40 Zeichen lang und eine 73 und eine weitere 54. Aber manchmal, wenn ich auf die Benutzeroberfläche klicke, wird es nicht aktualisiert, weil wir einen Witz bekommen, der mehr als 75 Zeichen lang ist. Wir haben drei verschiedene Codierungsstile gesehen. Wir haben einen funktionalen Ansatz mit dem Array gemacht. Wir haben einen asynchronen Ansatz mit dem Fetch durchgeführt, und wir haben auch einen anderen asynchronen Ansatz mit festgelegtem Intervall durchgeführt. Sie sind alle sehr unterschiedlich, völlig unterschiedliche APIs. Normalerweise ist es eine Mischung aus funktionalen Codes und zwingenden Codes. Aber all das ist an Ereignisse gebunden, als ob wir auf unseren Button klicken und dann etwas tun, und es sind alles sehr unterschiedliche APIs. sehen uns im nächsten Video, wenn wir einen Blick darauf werfen, wie RxJs dies in einer API vereinfachen wird. 4. Die Lösung: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs für Master RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werden wir einen Blick auf den Code werfen, den wir in einem vorherigen Video gemacht haben, aber dann machen es einfacher und prägnanter mit RxJs. Lasst uns direkt in den Code eintauchen. Das erste, was wir tun müssen, ist RxJs zu installieren, wir werden eine npm-install RxJs tun. Das ist RxJS installiert. Lassen Sie uns die Anwendung neu starten und beginnen Sie mit RxJs. Hier haben wir die Anwendung. Das erste, was wir tun müssen, ist, etwas Code aus RxJS zu importieren. Fangen wir mit dem Array an. Für das Array haben wir einen statischen Satz von Daten, daher müssen wir die Funktion von RCS importieren. Das lässt uns ein statisches Array von Daten in ein beobachtbares verwandeln. Lassen Sie uns gehen und goat in der Event-Handler eingeben. Ich fange an, an der Kohle von falsch in der Reihe von Zahlen zu arbeiten, die es dreht sich nicht beobachtbar und dann erhalten wir den Wert verlieren, um Funktion zu abonnieren. Lassen Sie uns abonnieren und den Handler hinzufügen , der für unsere Daten aufgerufen wird. Hier drin werden wir nur die Daten anzeigen, also was wird passieren? Dies wird jede einzelne Zahl in ein Ereignis verwandeln. Der Textinhalt auf dem Ergebnis wird zehn Mal aktualisiert und wir sehen das letzte Element. Dort sehen wir, dass 10 angezeigt wird. Wir möchten in der Lage sein, die Daten zwischen der Erstellung Ihrer beobachtbaren in Abonnements zu manipulieren . Wir können dies tun, indem wir die Pipe-Funktion aufrufen und RxJS-Operatoren in diese Pipe pausieren. Wir werden einige Operatoren importieren. Der erste Operator wird importieren, ist die Karte, weil wir die Nummer in ein Objekt mit einem X ändern wollen . Wir rufen map innerhalb der Pipe-Funktion, und wir nehmen die Nummer, die in kommt, und wir verwandeln es in ein Objekt mit einer X-Eigenschaft, Genau wie wir es vorher hatten. Wir sehen, dass wir ein Objekt mit dem verlorenen Wert von 10 bekommen. Wir müssen dies immer noch in ein Array mit dem ganzen Wert und dem Filter verwandeln. Dazu verwenden wir den Filter und den Scan-Operator. Wir werden sie importieren. Gehen Sie zurück zu der Pipe, nachdem die Zuordnung in der Pipe zu filtern. Genau wie zuvor filtern wir nach der x-Eigenschaft, die kleiner als sieben ist. Dann werden wir einen Scan-Operator verwenden, um einzelne Elemente in eine Sammlung von Elementen zu verwandeln, drehen sich die separaten Ereignisse in ein Array von Ereignissen. Der gescannte erhält zwei Parameter, der vorherige Wert im aktuellen Wert ausgegeben wird. Das vorherige wird also ein Array sein, also geben wir einfach ein neues Array zurück, indem wir den aktuellen Wert damit verketten. Wir werden sagen, dass er mit einem leeren Array beginnen soll. Da haben wir es. Ein Array mit Zahlen von Null bis sechs, alles kleiner als sieben. Lassen Sie uns das gleiche mit dem Intervall tun, wird eine neue Funktion von RxJS importieren, um ein Intervall zu starten, das Gold-Intervall ist, einfach. Wir werden den Körper des Intervallschaltflächenklick-Handler ersetzen , um Intervallfunktion von RxJS zu verwenden. Wiederum wird jede Sekunde ein Ereignis auslösen. Lassen Sie uns den ganzen Code von unten kopieren, die ganze Pipe mit dem Operator. Dort sehen wir das Intervall Brennen drucken alle Zahlen von Null bis sechs in den Objekten. In diesem Fall hört das Intervall noch nicht auf. Es feuert weiter, aber es wird keine Ereignisse mehr ausgeben. Wir werden das in einem anderen Video reparieren. Gehen wir und machen Sie die gleiche Breite, die AJAX-Anfrage. Wir werden die AJAX-Objekte aus RXJS/AJAX importieren. Wir werden das benutzen, um den Json von der Chuck Norris API zu bekommen. Mit Ajax.getJSON erhalten wir eine beobachtbare mit der AJAX-Anfrage oder eine Antwort, sollte ich sagen, die in den vorhandenen Code kommen wird. Wieder werde ich den Code kopieren, den wir vorher hatten. Jetzt ist das Ergebnis etwas anders, also muss ich eine andere Kartenfunktion machen, im Grunde von zwei Witz verknüpft ist, um zu entwerten. In diesem Fall ist es gut genug, nur die Länge zu haben , weil ich sie bereits einem Objekt in der folgenden Zeile zuordne. Lassen Sie uns den Filterwert von 70-75 ändern, da es sehr wenige, wenn irgendwelche Witze gibt , die weniger als sieben Zeichen sind. Dort sehen wir die AJAX-Anfrage funktioniert. Alle drei Ereignisse sind mit so ziemlich dem gleichen Code gemacht. Nur auf AJAX-Anfrage unterscheidet sich aufgrund der Daten und der Filterlänge etwas. Aber abgesehen davon ist es identisch. Es ist alles eine Frage von wirklich, wirklich einfachen Funktionen. Aber wir können dies tatsächlich einen Schritt weiter gehen, da der Ereignishandler auf den Buttons auch Observables sein kann. Lassen Sie uns das Tuning-Firma-Event ändern. Wir können DOM-Ereignisse in ein beobachtbares verwandeln. Wir gehen in den Boden, und wir gehen in den Ereignissen vorbei. Wir sind an dem Click-Ereignis in diesem Fall interessiert, wir haben einen beobachtbaren Stream von Klicks, wir können Pipe, das ist eine Verwendung eines anderen Operators, um die Karte zu wechseln. Wir können das tatsächlich in einen anderen Ereignisstrom verwandeln. Wir wechseln von einem Ereignisstream zu einem anderen Ereignisstream, der von den ursprünglichen Klickereignissen den AJAX-Ereignissen zuordnet. Es gibt AJAX-Ereignis wird immer noch ausgelöst. Lassen Sie uns das gleiche für das Intervall und das Array von Zahlen Taste tun. Das Intervall funktioniert, lässt es löschen, neu starten und wir werden sehen, dass das Array auch funktioniert. Wir verwenden nur eine API für DOM-Ereignisse, zum Abrufen von asynchronen Daten, zum Arbeiten mit einem Intervall und zum Arbeiten mit einem statischen Array von Daten, was meiner Meinung nach wirklich ordentlich ist. Lernen Sie einfach eine API und Sie können loslegen. Wir haben also gesehen, dass ArcGIS Observables erstellt, die Ereignisse im Laufe der Zeit erzeugen. Ein Klick-Ereignis, Abrufen von Ereignissen, abgeschlossen, ein Intervall-Ereignis, so etwas. Ereignisse können so oft ausgelöst werden, wie sie wollen. Möglicherweise haben Sie ein beobachtbares mit Null-Ereignissen, vielleicht haben Sie eines mit Hunderten von Ereignissen. Wir haben Operatoren gesehen, in denen wir diese Ereignisse, Strings manipulieren und Ereignisse ändern oder Ereignisse oder neue Dinge mit ihnen filtern können. Wenn Sie sehen, dass diese Operatoren sehr fokussiert sind, erledigen sie eine Aufgabe, die das gut macht. Das bedeutet, dass wir wirklich einfache Funktionen haben, die einfach zu Komponententest und einfach zu etwas komplexeren kombinieren können. Wir haben gesehen, dass wir mit einer einzigen Zeichenfolge beginnen können, einem Click-Ereignis, und das dann in eine Reihe von anderen Ereignissen verwandeln können, was wirklich schön ist. Wir sehen uns im nächsten Video. 5. Das Beste aus diesem Kurs machen: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs zur Beherrschung von RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werden wir kurz darüber sprechen, wie Sie das Beste aus diesem Kurs herausholen können. Es gibt viele Videos, und eine Möglichkeit, wie Sie beginnen können, ist, sie einfach von Anfang bis Ende anzusehen. Kein Problem, das kannst du tun, wenn du willst. Wenn Sie jedoch mehr an bestimmten Anwendungsfällen für RxJs interessiert sind, sollten Sie mit dem Szenarioabschnitt beginnen. Dort beschreibe ich mehrere Anwendungsfälle wie eine inkrementelle Such- oder Zeichnungsanwendung, und Sie können sich diese ansehen und entscheiden, an welchen Videos Sie interessiert sind. Dann können Sie zu bestimmten Operatoren wechseln. Dann verwenden Sie möglicherweise bereits RxJs, daher könnten Sie an bestimmten Operatoren oder spezifischen Möglichkeiten zum Erstellen von Observables interessiert sein. Sie können direkt zu diesen Videos gehen. So oder so, Sie können viele Informationen aus diesen Videos erhalten. Jetzt schreibe ich eine Menge Codes. Jedes Mal, wenn Sie diesen Kerl Popup sehen, bin es nicht ich, aber ich benutze diese Folie, dann werde ich eine Menge Beispielcode schreiben. Der gesamte Beispielcode ist auf GitHub verfügbar. Wenn Sie es verwenden möchten, und ich empfehle es dringend, gehen Sie zu GitHub und klonen Sie es von dort. Dies ist das Explore Repository. Mein GitHub-Benutzername ist Mauricedb, und das Repository heißt master-rxjs-6-ohne-breaking-a-sweat. Wenn Sie dies klonen möchten, scrollen Sie ein wenig nach unten und klicken Sie auf „Klonen oder Herunterladen“. Wenn Sie ein Git-Benutzer sind, kopieren Sie einfach die URL hier. Wenn nicht, gehen Sie zu Download ZIP und laden Sie den Code auf diese Weise herunter. Ich werde nur die URL kopieren. Im Konsolenfenster werde ich es klonen, git klonen und in die URL einfügen und „Enter“ drücken. Dadurch wird das komplette Repository schnell in einen neuen Ordner heruntergeladen. Nun, wenn ich in diesen Ordner cd, wenn Sie jetzt npm install ausführen, werden alle erforderlichen npm-Pakete installiert, so dass Sie tatsächlich den gesamten Code ausführen können. Da gibt es eine böse Sicherheitswarnung. Mach dir deswegen keine Sorgen. Das ist nicht von RxJS, das sind tatsächlich die Ergebnisse eines Primnummer-Pakets, das ich verwende, und das hat eine Quotenabhängigkeit, die den Fehler verursacht. Wenn Sie das nicht verwenden, nur RxJs oder Partial verwenden, die ich benutze, um den ganzen Code zu kompilieren und zu bündeln , wird es gut sein, Sie werden den gleichen Fehler nicht sehen. Da sind wir. Wir werfen einen Blick auf den Code in einem Moment. Wenn Sie nun Probleme mit dem Kurs oder den Beispielen haben, ist das Überprüfen des Quellcodes ziemlich eine erste. Vergleichen Sie Ihren Code mit meinem Code und vielleicht entdecken Sie einen Unterschied. Wenn Sie mehr über einen der Operatoren oder Möglichkeiten zum Erstellen von Observables wissen müssen, ist die RxJS-Dokumentation auch ziemlich gut. Dies ist die RxJS-Website, unter rxjs.dev. Es ist ziemlich schön, und der Referenzabschnitt ist ziemlich gut. Sie können alle verschiedenen RxJS-Operatoren und Möglichkeiten zum Erstellen von Observables hier oder mit einem netten Filter sehen. Die reactivex.io-Website ist auch ziemlich ordentlich. Es enthält weitere Informationen. Wenn ich hier zu Operatoren gehe, können Sie viele Informationen über Operatoren sehen. Eine Sache, die wirklich schön ist, ist der Entscheidungsbaum, um zu entscheiden, welcher Operator oder welche Funktion ein neues Observable erstellt werden soll, das Sie tatsächlich wollen. Nicht nur über RxJs, sondern über die gesamte ReactiveX-Familie, aber sehr zu empfehlen. Natürlich können Sie Fragen im Bereich Q&A stellen und ich werde sie beantworten. Aber vielleicht nicht nur ich. Ich empfehle Ihnen, auch unsere Fragen zu beantworten. Es liegt nicht daran, dass ich sie nicht beantworten möchte, aber über eine Antwort nachzudenken ist eigentlich ein großartiges Lernwerkzeug. Einer der Gründe, warum ich in den Unterricht über Softwareentwicklung kam, war, weil ich mehr darüber erfahren wollte. Der beste Weg, um sicherzustellen, dass Sie die meisten Dinge über die Technologie wissen , wenn Sie es anderen erklären können. Jetzt empfehle ich Ihnen dringend, den ganzen Code zu üben. Ansehen von Videos ist ordentlich, aber es ist tatsächlich so, viel besser, es zu lernen, also codieren Sie die Dinge. Ich habe eine kleine Starter-Vorlage erstellt. Wenn ich das Projekt mit Visual Studio Code, meinem Editor meiner Wahl,öffne meinem Editor meiner Wahl, können Sie hier viele Ordner für alle verschiedenen Projekte sehen. Es ist noch nicht da, aber ich werde es hinzufügen, bevor dieser Kurs live geht. Es wird einen Ordner namens 000-template geben. Das ist die Kesselplatte, die ich für all diese benutze. Es hat einen kleinen Startknopf. Es hat die wichtigsten Dinge über die Arbeit mit partial-js da drin. Das ist ein toller Ausgangspunkt. Wenn Sie dies ausführen möchten, benötigen Sie tatsächlich Node und NPM installiert. Ich habe Node installiert. Die Art und Weise, wie ich überprüfen kann, ist, dass Knoten dash Version mit einem einzelnen V ausgeführt wird. Dann können Sie sehen, dass ich bei Knoten 8.12 bin , der eigentlich etwas veraltet ist, aber das ist in Ordnung. Das wird gut funktionieren. Wenn Sie Nodes installieren müssen, gehen Sie auf die Node.js Website und hier können Sie die neueste Version herunterladen. Ich empfehle, die LTS-Version, die Langzeit-Support-Version, zu verwenden die Langzeit-Support-Version, die normalerweise die beste ist. Sehen Sie, ich bin etwas veraltet, aber das ist eigentlich kein Problem. Wenn Sie Node installieren, erhalten Sie jetzt normalerweise NPM kostenlos. Es gibt ein paar Distributionen, in denen Sie es nicht tun, aber normalerweise ist das enthalten. Sie können überprüfen, indem Sie npm dash Version ausführen, und dann können Sie sehen, dass ich bei NPM 6.4.1 bin. Beide werden benötigt, um Dinge zu laufen. Sie benötigen auch einen Browser. Alle Beispiele werden in einem Browser ausgeführt. Ich benutze Chrome, aber ein anderer vernünftiger moderner Browser wie Safari, Firefox, Arch, sie werden alle gut funktionieren. Es liegt wirklich an dir. Sie benötigen einen Code-Editor. Ich benutze Visual Studio Code, aber es liegt wirklich an Ihnen. Sie möchten Sublime, Notepad plus, Visual Studio, WebStorm verwenden , es spielt wirklich keine Rolle. Visual Studio Code ist wirklich großartig, daher wird es dringend empfohlen. Aber alle anderen werden auch funktionieren. Jetzt sind alle Samples in nummerierten Ordnern. Grundsätzlich sind die 100 Ordner das Intro. Bei der 200-Serie geht es um das Erstellen von Observables. Bei den 300er Baureihen dreht sich alles um Bediener und bei der Serie 400 dreht sich alles um verschiedene Szenarien. Sie können sie alle auf die gleiche Weise ausführen. Grundsätzlich gut, um Nummer für das zu schreiben, was auch immer Sie interessiert sind. Angenommen, wir wollen die inkrementelle Suche ausführen, das ist Ordner 403. Was wir tun, ist, dass wir einen npm Lauf starten: 403. Das startet einen kleinen Webserver und kompiliert dieses Beispiel und macht es bereit, im Browser ausgeführt zu werden. Im Browser können Sie das auf localhost Port 1234 öffnen. Wir sehen teilweise Bundle die Anwendung und starten Sie einen Server am localhost Port 1234. Lassen Sie uns das kopieren. Sobald es fertig ist, können wir zum Browser gehen, eine neue Registerkarte öffnen, zum localhost-Port 1234 gehen und wir sehen die Anwendung. Jetzt wird dies tatsächlich GitHub-Benutzer durchsuchen. Wenn ich nach Maurice suche, sehe ich meinen eigenen Benutzer als den zweiten, alle Beispiele funktionieren in ähnlicher Weise. In einigen Fällen müssen Sie die Entwicklungstools öffnen, da console.log Anweisungen verwendet werden, um Dinge in den Entwicklungstools auszugeben, und in den meisten Fällen sehen Sie auch eine Menge Ausgabe in diesem normalen Bildschirm. Wenn Sie anfangen, Dinge zu bearbeiten, ist partiell wirklich nett. Wenn Sie eine kleine Änderung vornehmen, werden die Codes teilweise automatisch neu kompiliert und den Browser aktualisiert, so dass keine Notwendigkeit, „F5" im Browser die meiste Zeit zu drücken. Normalerweise funktioniert es einfach. Gelegentlich, wenn Sie jemals einen Syntaxfehler hatten, kann der Browser teilweise nicht aktualisieren, er könnte defekt sein. Aber in der Regel wird das automatisch funktionieren. Wir sehen uns im nächsten Video. 6. Bausteine von RxJS: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs zum Mastern von RxJs 6 ohne Schweiß zu brechen. In diesem Video werden wir über die wichtigsten Bausteine von RxJs sprechen. Hier haben wir ein schönes Diagramm mit den Hauptbausteinen. Ich habe das tatsächlich von der ReactiveX-Website genommen, die ziemlich ordentlich ist, um einen Blick darauf zu werfen. Hier ist ReactiveX-Website und wenn Sie zu Docs Observables gehen, finden Sie das gleiche Diagramm dort. Diese Website ist cool, weil sie eine Menge Dokumentation hat, wird sie später wieder besuchen. Aber es wird uns auch alle verschiedenen Sprachen zeigen. Es gibt eine ganze Reihe hier. Aber wenn Sie auf Andere klicken, sehen Sie eine längere Liste. RxJs zu kennen, wird gut in andere Sprachen übersetzen, was mit Technologie immer schön ist. Aber mehr über dieses Diagramm. Um oben sehen Sie eine Zeitachse eine beobachtbare Zeitachse. Die kleinen Formen darüber sind Ereignisse, die im Laufe der Zeit emittiert werden. Die kleine Linie am Ende ist das beobachtbare Geschlossen. Danach werden keine Ereignisse mehr ausgesandt. Der Flip hier ist ein Operator. Operatoren erhalten die Chance, auf alle ausgestrahlten Ereignisse zu arbeiten. In diesem Fall dreht es sie nur um. Ein Observable ist eine Sammlung oder Null oder mehr Ereignisse im Laufe der Zeit. Observables können geöffnet oder geschlossen werden. Solange sie offen sind, können sie Ereignisse aussenden, aber fragen Sie sich, dass sie das nicht mehr tun können, und sie können wegen des erfolgreichen Schließens oder eines Fehlers nah sein. Dies ist die RxJS Marbles Websites, die eine wirklich nette Seiten, um zu sehen, wie die Dinge funktionieren. Eigentlich klonen Sie es und ich werde es verwenden, um einige der Beispiele zu demonstrieren. Hier haben wir Timeline. Hier ist eine leere Zeitleiste. werden keine Ereignisse ausgegeben. Aber an einem kleinen vertikalen Balken auf der rechten Seite kann man sehen, wo die Zeit aufhört und das Beobachtbare nahe ist. Hier ist ein Intervall. Wahrscheinlich die Quintessenz beobachtbar, es gibt jedes so oft ein Ereignis aus, in diesem Fall alle 20 Millisekunden. Nun, die kleine Linie an der Vorderseite deutet darauf hin, dass es am nächsten Ende ist, aber es tut nicht, es geht nur für immer weiter. Observables sind nur eine lange Strecke von Ereignissen im Laufe der Zeit. Observables wären nicht viel gut, wenn niemand sie beobachtet. Wir haben einen Beobachter und die beobachteten abonniert eine beobachtbare und wird über alle ausgestrahlten Ereignisse benachrichtigt. Es kann tun, was wir damit machen wollen. In dem Beispiel, das ich tun werde, werde ich sie nur anzeigen. Wir haben auch Betreiber. Operatoren sind die Sache, die RxJs wirklich interessant macht. Operatoren können alles tun. Wie hier habe ich den Filteroperator, der die alten Werte herausfiltert. Es borgt keine Null, zwei oder vier, weil sie gerade sind, es gibt nur eins und drei an die beobachtbaren Ziele weiter. In diesem Fall sehen wir, dass die Quelle und das Ziel beobachtbar, die oben und unten haben die gleiche Lebensdauer. Ein anderer Operator ist nehmen drei. Es dauert nur die ersten drei Ereignisse, die von der Quelle emittiert beobachtbare emittiert diejenigen auf dem Ziel beobachtbar und wenn es drei Ereignisse gefunden wird, schließt es. Die Quelle emittiert 0, 1, 2, 3 und 4, aber auf dem Ziel haben wir nur 0, 1, 2 und das beobachtbare ist geschlossen. Operatoren sind in der Regel wirklich einfache, reine Funktionen, die sie einfach zu schreiben. Die wirkliche Kraft kommt aus der Kombination. Kombinieren Sie viele verschiedene Operatoren, um den gewünschten Effekt zu erzielen. Wenn wir ein Observable abonnieren, erhalten wir ein Subskriptionsobjekt. Manchmal brauchen Sie es nicht, aber ein Abonnement kann nützlich sein , wenn Sie ein Observable abbestellen möchten. Abmeldung verhindert, dass der Beobachtbare weitere Ereignisse ausgibt. Lasst uns in ein paar Codes eintauchen. Nun, Sie fragen sich vielleicht, warum ich nicht diese Rx-Murmeln benutze, die ich gerade gezeigt habe, um den Code zu demonstrieren. Der Grund ist, weil es auf RxJs 5 basiert, und Sie können die Codes sehen. Hier ist die RxJS 6-Syntax, ganz anders. Wir konzentrieren uns auf RxJs 6. Wir werden nicht Rx Murmeln verwenden, um zu demonstrieren. Ich werde nur ein benutzerdefiniertes Projekt wie dieses verwenden. Das erste, was wir tun müssen, ist der Import von RxJs. Die Sache, die wir in diesem Fall importieren müssen, ist das Intervall weil ich das Quintessenz Observable verwenden werde, das jede Sekunde ein Ereignis ausgibt. Wir werden die Stream-Variable definieren, um alle beobachtbaren Ereignisse und eine Konvention zu halten . Die Benennungskonvention wird häufig verwendet, um Variablen zu postfixieren, die beobachtbare Streams mit einem Dollar enthalten. Sie müssen das nicht tun, aber es zeigt, was es ist. Stream-Dollar ist unser beobachtbarer Strom, der pro Sekunde ein Ereignis ausgibt. Wir brauchen einen Beobachter, der diesen Strom anhört. Der Beobachter, den ich verwenden werde, ist ein Objekt, das eine nächste Funktion hat und diese nächste Funktion Code sein wird , wobei jedes Ereignis ausgegeben wird. In diesem Fall ist es eine normale Funktion und E ist das Ereignis, das ausgegeben wird. Ich werde es nur in einem kleinen div-Elementen anzeigen. Mit dem Stream kann ich möglicherweise den Beobachter abonnieren und dies gibt mir ein Subskriptionsobjekt zurück, dem ich mich später abmelden kann, wenn ich wollte. Wenn ich den Start-Button betätige, wird es das Intervall beobachtbar aktivieren und dort sehen wir zweites Ticken durch. Fügen wir einen Operator hinzu. Auch hier verwenden wir einen Import, aber dieses Mal verwenden wir einen Import von RxJS-Operatoren. Die Operatoren werden aus einem etwas anderen Teil des Pakets importiert. Wir werden den Filter und den Take-Operator importieren , um den gleichen Effekt zu erzielen, den ich im Rx-Marmordiagramm hatte. Der große Unterschied zu RxJs 6 ist der verwendete Pipe-Operator für Filter mit RxJs 5, die noch nicht existierten. Ich benutze Pipe und gebe den ersten Operator dort an, den Filter. Mit RxJs 6 verwenden Sie die Pipe-Funktion, um Operatoren zu übergeben. In diesem Fall werde ich den Filteroperator übergeben und alle geraden Werte herausfiltern. Wenn ich nun auf Start klicke, sehe ich 0, 2, 4 usw. Ich kann Operatoren kombinieren, die angegeben sind, um den Operator zu nehmen , dass ich nur die ersten drei Werte nehmen möchte. Wenn ich auf Start klicke, werde ich 0, 2, 4. Aber dann tritt der Operator dann ein und es ist dem Stream am nächsten und es werden keine weiteren Werte ausgegeben. Ziemlich nette Art. Jetzt ist die Reihenfolge der Operatoren wichtig. Sie arbeiten auf dem Stream in der Reihenfolge, in der sie definiert sind. Wenn ich einen Take zuerst setze, wird es auf den ursprünglichen Stream nehmen, der 0, 1, 2, 3, 4 und usw. ausgibt . Es wird nur drei Werte von ihren 0, 1, 2. Die eine wird durch den geraden Filter fallen gelassen und wir sehen nur Null und zwei. Jetzt lassen Sie uns deaktivieren, um für einen Moment zu nehmen, damit es weiterhin Werte ausgibt, und wir können den Effekt der Abmeldung sehen. Wir werden das Abonnement verwenden und nach fünf Sekunden rufe ich die Abmeldefunktion an, um das Abonnement zu beenden. Wenn ich nun auf Start klicke, sehen wir 0, 2 und 4 und mehr Ereignisse, weil wir uns abgemeldet haben. Die wichtigsten Bausteine von RxJs, Observables, Beobachter, Abonnements, Operatoren und der Pipe-Funktion, in die Operatoren übergeben werden. Wir sehen uns im nächsten Video. 7. Beobachtungswerte von(): Hallo, Maurice hier. Willkommen zurück zu diesem Kurs zum Mastering RxJs 6 ohne Brechen A Sweat. In diesem Video werden wir einen Blick auf die Funktion von werfen , um neue Observables mit einem festen Satz von Werten zu erstellen. Of () ist wirklich einfach, es dauert eine Anzahl von Werten, Null oder mehr, und es wird ein beobachtbares erstellen und sofort alle diese Werte auf das beobachtbare emittieren. Dann wird es automatisch das beobachtbare schließen. Werfen wir einen Blick auf den Code. RxJS Murmeln Diagramm für ein beobachtbares nur emittierendes. Sie können sehen, dass es den Wert 1 ausgibt und er sofort geschlossen wird. Um dies zu tun, müssen wir aus RXJS importieren, damit ein neues Observable erstellt wird. Wir definieren eine neue String-Variable und weisen sie dem Ergebnis der Verschneidung von mit den Werten 1, 2, 4. Als nächstes werde ich es abonnieren, ich werde nur eine einfache Funktion verwenden. Ich werde mehr über die verschiedenen Möglichkeiten der Abonnierung in einem anderen Video erklären. Lassen Sie uns einfach den Textinhalt der Ergebniselemente festlegen. Wenn ich auf Start klicke, sehen wir den Wert vier, in der Tat wurden alle Werte ausgegeben, aber das ist schwer zu sehen, weil sie sofort emittiert werden, so dass wir nur die letzte sehen. Nun fügen wir die console.log hinzu, so dass wir sehen können, dass alle Werte ausgegeben wurden. Dort werden sie im Protokoll angezeigt, und wenn ich erneut klicke, werden sie beim zweiten Mal gedruckt. Jetzt lassen Sie uns drucken, kurz bevor wir abonnieren und kurz nachdem wir abonnieren. Wir können sehen, dass alles ist, was du auch synchron siehst. Wir schreiben asynchron wie Code, aber es wird wirklich synchron in dieser Zeit ausgeführt. Sehen wir, dass wir vor dem Abonnieren und nach dem Abonnieren und dazwischen erhalten wir Werte emittiert werden. Die of () ist eine wirklich einfache Funktion, um Observables zu erstellen. Es synchron, es gibt nur alle Werte aus und es schließt. sehen uns im nächsten Video, wenn wir einen Blick auf einige weitere Möglichkeiten werfen, Observables zu erstellen. 8. Beobachtungswerte: Hi. Maurice hier. Willkommen zurück zu diesem Kurs auf Master RxJs 6 ohne Brechen A Sweat. In diesem Video werden wir kurz einen Blick auf drei besondere Arten der Erstellung von Observables werfen. Sie werden dies nicht oft im Produktionscode verwenden. Sie werden hauptsächlich zum Testen und einigen anderen Sonderfällen verwendet. Die erste ist die Leere rationale Funktion. Es erzeugt eine beobachtbare, die leer ist. Es gibt nie etwas aus, und es schließt sofort. Wenn Sie ein Observable mit der Funktion of ohne Parameter erstellen, ist es tatsächlich dasselbe wie die Verwendung von leer. Wenn wir uns die ReactiveX-Website ansehen, können wir leer sehen. Es erzeugt nur ein beobachtbares. Wir können die leere horizontale Linie mit der kleinen vertikalen Linie auf der rechten Seite sehen. Es schließt sich sofort, dort passiert nichts. Die nächste, um einen Blick zu werfen, ist Never. Es ist noch einfacher. Es öffnet ein beobachtbares. Es gibt nie etwas aus, aber es schließt sich nicht, es tut nicht einmal das. In dieser Hinsicht ist es noch einfacher. So sieht es nie aus. Wir haben eine leere horizontale Timeline gesehen, aber nicht einmal die enge Linie am Ende. Die letzte Möglichkeit, ein Observable zu erstellen, das ich schnell anschauen möchte, ist ThrowError. Die ersten beiden waren tatsächlich Konstanten. ThrowError ist besonders, dass es eine beobachtbare Zeichenfolge erstellt und sofort einen Fehler ausgibt. Der Zeichenfolgenfehler wird eingeschlossen. werden auch keine Ereignisse wirklich im Stream ausgegeben. Sieht so aus. Wir haben eine leere Zeitleiste gesehen, aber anstelle der kleinen vertikalen Linie, um anzuzeigen, dass sie schließt, sehen wir über, das ist der Hinweis, dass es mit einem Fehler schließt, aber keine anderen Ereignisse, nichts. Die leeren und nie sind tatsächlich Konstanten.Sie sind auch Funktionen dort, um sie zu erstellen, aber sie sind veraltet. In der Regel verwenden Sie die Konstante, um eine neue Zeichenfolge zu erstellen. Der ThrowError ist eine Funktion. Es dauert einen Fehler Objekte, alle drei erstellen nur eine leere beobachtbare. Das leere im ThrowError schließt es sofort. Der erste Erfolg, der Verlust Fehler, und dann nie nichts tun. Diese sind nützlich zum Testen von Operatoren und anderen Dingen und in einigen Fällen zum Kombinieren von Zeichenfolgen. Wir sehen uns im nächsten Video, wenn ich diese Operatoren verwenden werde, um Ihnen zu zeigen, wie Sie Abonnements einrichten und die verschiedenen Ereignisse wie Schließen, Fehler und Ausgeben sehen geschieht. Wir sehen uns dort. 9. subscriptions erstellen: Willkommen zurück zu diesem Kurs auf, Mastering RxJS6 ohne Brechen A Sweat. In diesem Video werden wir einen genaueren Blick auf die Abonnements werfen. Mit der Subscribe-Funktion richten wir ein Abonnement ein, aber es ist tatsächlich eine überladene Funktion und wir werden einen Blick auf verschiedene Möglichkeiten werfen, wie wir Parameter an sie übergeben können. Es ist auch wichtig zu erkennen, dass das Abonnieren in der Regel ein beobachtbares aktiviert. Die meisten Observables tun nichts, bis Sie subscribe aufrufen, und wie wir gesehen haben, bevor sie ein Subskriptionsobjekt zurückgeben. Das Abonnement kann nicht mehr abbestellt werden, wenn wir nicht mehr an dem Abonnement interessiert sind. Neben der Verwendung von subscribe gibt es eine andere Möglichkeit, alle Werte von einem beobachtbaren zu erhalten. Sie können die ForEach Funktion verwenden. Es wird grundsätzlich unter der Haube abonnieren und über alle Elemente schleifen, aber lassen Sie uns einen Blick auf den Code werfen. Hier haben wir ein paar verschiedene beobachtbare Streams. Der Datenstrom mit den Zahlen 1-4, ein leerer Stream, ein nie Stream und ein Fehlerstrom. Mit dem Datenstrom werden alle Werte wie zuvor weggelassen, und wir sehen nur den letzten. Aber wenn wir eine leere Zeichenfolge verwenden, wird überhaupt nichts übermittelt, wir sehen nichts. Lassen Sie uns ein wenig auf das Abonnement aktualisieren. Es stellt sich heraus, dass diese Variante des Abonnements eine Reihe verschiedener Callbacks benötigt. Die erste ist für, wenn ein Wert gesendet wird. Die zweite Callback-Funktion ist für, wenn ein Fehler erkannt wird. Denken Sie daran, dass der Fehler auch die Zeichenfolge schließt. Lassen Sie uns die Tatsache drucken, dass ein Fehler aufgetreten ist, und der dritte Rückruf ist für, wenn die beobachtbare Zeichenfolge geschlossen wird. Wird keine Daten übergeben, aber wir können die Tatsache drucken, dass die beobachtbare abgeschlossen ist, und jetzt, wenn wir verwenden, um zu leeren beobachtbar, können wir sehen, dass wir abgeschlossen. Wenn wir Daten verwenden, werden die Werte ausgegeben, aber wir sehen diese nie mehr, es ist abgeschlossen. Aber lassen Sie uns eine console.log hinzufügen, damit wir tatsächlich die Werte sehen können, die emittiert werden. Jetzt sehen wir die Werte 1-4, die in der Konsole auf der rechten Seite ausgegeben werden. Complete wird nur in der Benutzeroberfläche angezeigt. Wenn wir das leere Observable verwenden, werden wir nur vollendet, und mit dem nie beobachtbaren passiert überhaupt nichts. Es ist noch nicht abgeschlossen. Es gibt nie aus. Aber mit dem Fehler beobachtbar, können wir sehen, dass die Fehlermeldung gedruckt wird. Etwas Schlimmes passiert einfach. Jetzt, um zu zeigen, dass ein Observable normalerweise nichts tut, wenn es kein Abonnement gibt, importiere ich den Tap-Operator. Der Tap Operator ist nützlich für das Debuggen. Sie können alle Ereignisse durch Tippen auf die Pipeline leiten und so etwas wie in diesem Fall tun, drucken Sie sie einfach in die console.log. Ist für Nebenwirkungen gedacht, nicht für die normalen Operatoren oder Sets Filter oder Map oder so etwas. Ich werde nur drucken tippen Sie mit dem tatsächlichen Wert, und wenn ich auf Start, wir abonnieren und wir sehen tippen 1 und dann den tatsächlichen Wert, der ausgegeben wird, und das gleiche für die anderen Werte im Stream abgeschlossen, aber lasst uns kommentieren Sie das Abonnement. Nun, wenn ich auf Start klicken, erstellt wir immer noch die Daten beobachtbar. Wir rufen den Tap Operator immer noch an, außer dass er nie ausgeführt wird. Es wird nur mit einem Abonnement ausgeführt, aber dies ist eine Möglichkeit, ein Abonnement zu erstellen, aber es gibt eine andere. Wir können auch den ForEach-Operator verwenden, um alle Werte auszudrucken. Einzahlungsziel rückwärts wird für jeden ausgegebenen Wert aufgerufen und es gibt ein Versprechen zurück, und in diesem Fall werde ich nur einen Erfolgsfall behandeln. Wenn das Versprechen aufgelöst wird, ist das Beobachtbare abgeschlossen, und dort sehen wir genau das gleiche Verhalten außer dieses Mal wird alles auf die Konsole gedruckt. Neben der Verwendung der Subscribe-Funktion mit drei Funktionen als Parameter. Wir können auch in einem Beobachterobjekt übergeben, Ziel abonnieren mit dem Beobachter. Wenn ich auf Start klicke, sehen wir immer noch die Tap Ausgänge, so dass das Abonnement aktiviert wurde. Nicht nur für Objekt beobachten, können wir drei Funktionen hinzufügen, die nächste, die jedes Mal aufgerufen wird, wenn Wert ausgegeben wurde Fehler, die aufgerufen wird, wenn ein Fehler auftritt und abgeschlossen wird, die aufgerufen wird, wenn die beobachtbare abgeschlossen und es ist erledigt. Dort haben wir es immer noch das gleiche Verhalten. Es spielt keine Rolle, welche der beiden Subscribe-Methode bevorzugen sollte, aber in den meisten Fällen sollten Sie immer Callbacks für beide Werte bereitstellen, die ausgegeben werden, Fehler auftreten und oft auch für abgeschlossen, aber sicher, dass Sie immer den Fehlerrückruf einschließen. Fehler können auftreten, und Sie müssen sich dessen bewusst sein. Lassen Sie uns einfach die Intervallerstellungsfunktion importieren. Um ein zeitbasiertes Observable zu erstellen, emittiert ein Ereignis jede Sekunde. Das Nein nach fünf Sekunden, rufen wir das Abmelden funktionale neue Abonnement aus dem Intervall abzumelden. Dort sehen wir die zweite Pause, aber nach vier hört es auf. Beachten Sie, dass wir keinen vollständigen Rückruf erhalten, wir melden uns ab. Es war nicht der Ereignisstrom abgeschlossen, kein Fehler, keine Fertigstellung. Wenn wir das Gleiche mit dem Take-Operator machen, nehmen wir nur die ersten drei Ereignisse. Jetzt sind die Dinge ein wenig anders, aber wird in Intervall durch Take-Operator piped, wobei die ersten drei Ereignisse und wir sehen 0, 1, 2 und dann ist es tatsächlich abgeschlossen. Jetzt ist es der beobachtbare Abschluss, bevor wir uns abmelden, also erhalten wir den vollständigen Rückruf. Die Verwendung von subscribe ist der bevorzugte Weg, um alle Werte zu erhalten , die bei der übermäßigen Verwendung von ForEach bevorzugt werden, gibt Ihnen mehr Kontrolle , mehr Flexibilität und verwendet dort drei verschiedene Funktionen. Der nächste, der Fehler, und die vollständige sowie, wenn Sie benötigen, um die Signale überprüft, wenn der Stream erfolgreich geschlossen wird. Wir sehen uns im nächsten Video. 10. Beobachtungswerte in from: Hi, ich bin Reece hier. Willkommen zurück zu diesem Kurs zum Mastern von RxJs 6 ohne Brechen A Sweat. In diesem Video werden wir einen kurzen Blick auf die Forum-Event-Art und Weise zu werfen, eine beobachtbare. Mit Forenereignissen können Sie ein Observable von jedem DOM-Ereignis oder einem verwandten Standardereignis wie Node.js erstellen . EventEmitter gibt es auch frühere Entlüftungsmuster rationale Funktion für andere generische Ereignisse, die noch nicht unterstützt werden. Werfen wir einen Blick auf den Code. Das erste, was wir tun müssen, ist, aus dem Ereignis zu importieren und die Codezeilen zu ignorieren, es gibt nur eine Skalierung mit einem hohen DPI-Bildschirm, den ich habe. Mit FromEvent kann ich angeben, welche Domänenelemente, in diesem Fall die Schaltfläche zu starten, welches Ereignis ich interessiert, das Click-Ereignis, und dann kann ich es abonnieren. Also in diesem Fall werde ich nur das Ergebniselement an die String-Schulden schließen , „Ich wurde geklickt“. Da ist es, „Ich wurde angeklickt“. also das Formularereignis verwenden, Siealso das Formularereignis verwenden,müssen Sie nicht gleichzeitig ein einzelnes Domänenelement Sie können eine ganze Sammlung auswählen. Mit dem Abfrageselektor habe ich alle Schaltflächen ausgewählt und mit diesem Selektor kann ich einfach eine beobachtbare für alle erstellen. Ich werde im Grunde die Ergebniselemente auf den Text der Schaltfläche setzen, so dass wir sehen können, dass es zwischen Start und Stopp wechselt. Der blaue Bereich auf dem Bildschirm war Leinwand. Also lasst uns ein bisschen mit der Leinwand herumspielen. Auch hier werde ich Formularereignisse verwenden, diesem Fall werde ich die Leinwand abonnieren und ich werde die Maus bewegen Ereignisse abonnieren. Ich werde im Grunde auf der Leinwand zeichnen, wie sich meine Maus bewegt. Deshalb brauchte ich die Schuppenziege unten. Also habe ich ein Abonnement gesetzt, ich bekomme den Ereignisbogen. Aus dem Ereignisbogen kann ich x- und die y-Offsets auf den Elementen erhalten. Dann kann ich mit dem Canvas-Kontext ein kleines Rechteck von zwei mal zwei Pixeln füllen, wenn die Maus ist. Aber jetzt, wenn ich die Maus über die Leinwand bewege, können Sie sehen, dass Punkte gezeichnet werden. Wenn ich mich langsam bewegen, sind sie nahe beieinander, aber wenn ich mich zu viel schneller bewege, sehen Sie, dass es tatsächlich einige Lücken gibt, weil nicht jedes Pixel ein Ereignis ist. Das FromEvent macht es wirklich einfach, Ereignishandler zu schließen und Observables basierend auf diesen Ereignissen zu erstellen, zumindest für die meisten Ereignisse. Gelegentlich müssen Sie zwei das FromEvent-Muster verwenden. So sehen wir uns im nächsten Video. 11. Timer und interval Beobachtungswerte: Hi. Maurice hier. Willkommen zurück zu diesem Kurs zur Beherrschung von RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werden wir einen kurzen Blick auf zeitbasierte Observables, den Timer und das Intervall werfen. Der Timer ist eine sehr einfache schöpferische Funktion. Es erstellt eine beobachtbare, die auf die bestimmte Menge an Zeit wartet und dann ausgibt, und möglicherweise mehrere Male abhängig vom zweiten Parameter emittiert. Das Intervall fängt gerade an zu emittieren und weiter zu emittieren, wirklich einfach. Das haben wir schon mehrmals gesehen. Werfen wir einen Blick auf den Code. Ich werde nur Timer hier verwenden, weil wir das Intervall bereits mehrmals verwendet haben. Wir importieren Timer von RxJs, und dann geben wir mit Timer die Zeit an, die gewartet werden soll. Eine Sekunde hier. Nach einer Sekunde aktualisieren wir die Ergebniselemente mit den Ereignissen. Wenn ich auf „Start“ klicke, sehen wir nach einer Sekunde, Null nackt und nichts anderes. Mit dem ersten Verzögerungsparameter erhalten wir nur die einzelnen Ereignisse. Wenn wir den zweiten Parameter hinzufügen, wird es tatsächlich das Intervall für jedes Ereignis nach der anfänglichen Verzögerung bestimmen. Jetzt wartete er fünf Sekunden und löste dann jede Sekunde ein Ereignis aus. Eine schöne Sache mit dem Timer ist, dass wir nicht nur die Anzahl der Millisekunden angeben müssen, sondern wir können auch Datumsangaben angeben, Objekte mit der genauen Zeit, zu sondern wir können auch Datumsangaben angeben, der es beginnen soll. Lassen Sie uns die Startzeit mit der aktuellen Datumszeit erstellen und fünf Sekunden hinzufügen, und dann sagen Sie, dass sie zu diesem bestimmten Zeitpunkt beginnen soll. Wieder, wenn ich auf „Start“ klicke, wartet es fünf Sekunden und beginnt dann wieder zu emittieren. Aber jetzt, weil das genau die Startzeit war, bestimmen wir. Der Timer ist wirklich nützlich, er wartet und dann, entweder einmal oder abhängig vom zweiten Parameter, beginnt nach jedem Intervall zu emittieren und Intervall beginnt sofort zu emittieren, wie wir zuvor gesehen haben. Beide sind wirklich gut für die Planung wiederkehrender Arbeit. Wir sehen uns im nächsten Video. 12. Von () mit Iterables und Versprechen verwenden: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs auf Master RRXjs 6 ohne Brechen A Sweat. In diesem Video werden wir einen Blick auf die Funktion from () werfen, um neue Observables zu erstellen. From () ist sehr vielseitig, es wird im Grunde alles nehmen, was entweder ein Abonnement oder ein Versprechen ist, oder etwas, das Sie wie ein Array oder ein iterierbares durchlaufen können und basierend darauf ein neues beobachtbares erstellen können. Sehr ähnlich wie die von (), wenn es um [unhörbar] geht und Satz von Werten außer mit von () müssen bekannte Werte sein. Hier ist es nur ein Array. Wenn Sie ein Array oder ein iterierbares verwenden, werden alle Werte synchron übermittelt. Natürlich kann das mit einem Versprechen nicht. Werfen wir einen Blick. Zuerst müssen wir von () aus RXDS importieren, und dann werden wir von () verwenden, ein Array von Zahlen 1, 2, 3 und wir werden diese einfach auf die Konsole drucken, wenn wir abonnieren. Wenn ich auf die Schaltfläche Start klicke, sehen wir die Zahlen 1, 2 und 3 im Konsolenfenster erscheinen. Schön und einfach. Wir können mit allem arbeiten, was wir durchlaufen können. Ich verwende einen Abfrage-Selektor, um alle oben genannten LIElements auszuwählen. Lassen Sie uns eine Überdosierung mit der von () Schleife, um eine beobachtbare zu erstellen. Eine beobachtbare von DOM-Elementen. Wir abonnieren und im Abonnement werde ich den Textinhalt der LIElements auf die Verwendung von () setzen . Wenn ich auf den Start-Button klicke, werden die fünf LIElements aktualisiert. Wir können auch von () mit Versprechen verwenden, was sehr praktisch sein kann, wenn Sie eine versprechenbasierte API wie fetch oder etwas anderes haben . In diesem Fall werde ich nur ein Versprechen erstellen und es nach zwei Sekunden mit dem Wert 42 auflösen. Mit from () verwandle ich das Versprechen in ein beobachtbares und abonniere es. Wenn die Zusage aufgelöst wird, wird das Abonnement aufgerufen und wir setzen die Ergebniselemente auf den Wert, der aufgelöst wird, 42 in diesem Fall. Die lis werden alle wieder aktualisiert und wir sehen den Wert 42 erscheinen. In all diesen Fällen schließt das Observable, sobald es weiß, dass es entweder mit einer festen Anzahl von Werten oder wenn das Versprechen aufgelöst wird. Verwendung von from () ist sehr einfach und nützlich für Sammlungen oder bei der Verwendung von Versprechen. Wenn Sammlungen verwendet werden, gibt es synchron alle Werte aus, und mit einem Versprechen wird es ausgegeben, wenn das Versprechen aufgelöst wird, und in allen Fällen wird es direkt danach geschlossen. Wir sehen uns im nächsten Video. 13. Beobachtungswerte von AJAX: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs zum Mastern von RxJs 6 ohne Brechen A Sweat. In diesem Video werden wir einen Blick auf Ajax-Anfragen werfen. Wenn wir Ajax Anfrage machen wollen, müssen wir Ajax von rxjs/ajax importieren. Nicht von rxjs selbst, sondern vom Sub-Paket namens Ajax. Eine Ajax-Sache, die wir zurückbekommen, ist sowohl ein Objekt als auch eine Funktion. Sie können es als Funktion verwenden, um Ihre Anfrage zu stellen, aber es gibt eine Reihe von Dienstprogrammfunktionen von dort aus , um das Leben für die meisten Anfragen zu erleichtern. Normalerweise mache ich einfach mit Ajax.getjson oder einem ajax.put oder einem ajax.post. Es basiert alles auf dem XMLHttpRequest-Objekt. Es funktioniert in älteren Browsern. Lassen Sie uns eine einfache Abrufanforderung machen. Zuerst werden wir Ajax von rxjs/ajax importieren. Zuerst verwende ich Ajax als Funktion. Wir müssen ein Objekt als Parameter angeben, und dieses Objekt kann eine Reihe von verschiedenen Einstellungen haben. Wenn Sie zur RxJS-Dokumentation gehen, suchen Sie nach Ajax, sehen Sie Ajax-Anfrage. Hier sehen Sie die Liste der Parameter, die Sie angeben können. In diesem Fall werde ich die Dinge einfach halten. Ich werde nur die URL angeben. Aber Sie können sehen, dass Sie ziemlich viel Kontrolle haben. Ich habe die URL hier zu einer Online-API, die Chuck Norris Witze zurückgibt. Wenn der Ajax-Aufruf abgeschlossen ist, gibt es ein beobachtbares zurück und das wird ausgegeben, sobald die Ajax-Anforderung beendet ist. In diesem Fall ist das übergebene Ereignis die XMLHttpRequest. Es hat ein Antwortobjekt, und unter der Antwort ist auf die tatsächliche Antwort, in diesem Fall gibt es einen Wert, der einen Witz hat. Es gibt einen Chuck Norris-Witz und einen anderen. Dies ist nicht schwer, aber in den meisten Fällen müssen Sie ein bisschen mehr angeben. Wenn ich weiß, dass ich nur einige JSON-Daten anfordern werde, verwende ich die GetJSON-Dienstprogrammfunktion, übergebe sie einfach an URL und optional einige Header, abonnieren Sie sie und es wird Sie zur tatsächlichen JSON-Nutzlast zurückgeben , wenn die Antwort abgeschlossen ist. Obwohl wieder, werde ich werten.Witz von der Payload bekommen und das anzeigen. Dort sehen wir noch einen Witz. Ausführen von AJAX-Anfragen mit RxJS ist wirklich einfach. Es basiert alles auf dem XMLHttpRequest-Objekt, so dass es mit alten Browsern funktioniert, und da es ein Observable zurückgibt, können Sie es einfach wie jede andere beobachtbare behandeln. Wir sehen uns im nächsten Video. 14. benutzerdefinierte Observable/innen erstellen: Hallo Maurice hier. Willkommen zurück zu diesem Kurs auf Master RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werfen wir einen Blick auf die Erstellung von Kundenbeobachtbarkeiten. Die erste Regel von benutzerdefinierten Observables besteht darin, sie nicht zu erstellen. Wenn Sie ein neues Observable erstellen möchten, sehen Sie, ob Sie mit einem vorhandenen beginnen können, das ist immer die beste Option. Hier auf der ReactiveX-Website, wenn Sie zu Operatoren gehen und Sie ein wenig nach unten scrollen, sehen Sie diese Option über eine Entscheidungsstruktur für die Verwendung von Operatoren. Nun, es hat auch diesen Entscheidungsbaum über die Verwendung von Funktionen, um neue Observables zu erstellen, und wir werden eine kleine Uhr erstellen, jede Sekunde, die wir in die aktuelle Zeit emittieren wollen. Das ist wie ein Intervall. Wir wollten Intervall, außer wir wollen nicht die Zahlen aus dem Intervall, wir wollen die aktuelle Zeit. Das ist wie die Verwendung eines Intervallbreiten-Kartenoperators kombinierte Zuordnung zur aktuellen Zahl, zur aktuellen Zeit. Aber wenn Sie keine vorhandene schöpferische Funktion finden können, die durch observable.create funktioniert, können Sie neue beobachtbare erstellen. Sie erhalten das Subscriber-Objekt, es hat eine nächste vollständige und eine Fehlerfunktion, die Sie aufrufen können, um Wert zu emittieren. Werfen wir einen Blick auf den Code. Lassen Sie uns zuerst die einfache Sache machen und beginnen wir mit einem Intervall. Ich werde zuerst eine neue Funktion erstellen, die ein neues Observable für mich erstellt. Weil ich zeitbasiert wollte, werde ich es Zeit nennen und die Anzahl der Millisekunden zwischen der Ausgabe der aktuellen Zeit übergeben . Weil es wirklich wie Intervall ist, werde ich mit dem Intervall beginnen und ich werde es der aktuellen Zeit zuordnen. Wenn wichtiges Intervall und Karte, und dann erstelle ich ein neues Intervall, das die Anzahl der Millisekunden angibt, dann werde ich die Pipe-Funktion verwenden, um einen Trudeau-Map-Filter auszuführen, ursprüngliche Nummer ignoriert und an einem neuen Datum zur lokalen Zeitzeichenfolge gearbeitet. Ich kann diese Zeit Creational Funktion wie jede andere verwenden, einfach mit der Anzahl der Millisekunden aufrufen, es gibt ein beobachtbares zurück, also abonnieren wir es, und wann immer es ein Ereignis ausgibt, aktualisieren wir unsere Ergebniselemente. Dort sehen wir unsere kleine Uhr tickt. Schön und einfach und ausgegeben, um wirklich der bevorzugte Ansatz zu sein. Aber werfen wir einen Blick auf einen anderen Ansatz, wenn es keinen Standard beobachtbar gibt, können Sie sie wirklich verwenden. In diesem Fall werden wir das Observable von rxjs importieren und observable.create verwenden , um ein völlig leeres neues Observable zu erstellen. Wir sind ein Objekt zum Abonnenten angehalten, das nächste, Fehler und vollständige Funktion haben wird . Diese Jungs werden nur neben verwenden, um Werte zu emittieren. Weil wir wirklich kein Ende der Zeit, und wir werden nicht davon ausgehen, wächst und der Fehler. Nur um zu zeigen, dass wir Werte emittieren können, gebe ich die Zeichenfolge hallo aus, und es erscheint. Wir wollen zeitbasiert emittieren, also lassen Sie uns ein festgelegtes Intervall erstellen, und so oft emittiert Millisekunden die aktuelle Zeit. Dort sehen wir unsere Kunden zeitlich beobachtbare emittierende Zeitwerte. Großartig. Jetzt sind wir noch nicht ganz fertig, weil wir ein festgelegtes Intervall beginnen und es wird für immer weiterlaufen. Lassen Sie uns eine console.log im Intervall hinzufügen, so dass wir tatsächlich sehen können, wenn es läuft. Lassen Sie uns das Abonnement erfassen, wenn wir abonnieren, damit wir uns nach fünf Sekunden wieder abmelden können. Wenn ich jetzt auf den Start-Button klicke, beginnt die Uhr zu laufen, aber das Element wird nach fünf Sekunden nicht mehr aktualisiert , weil wir unser Abonnement abgebrochen haben, aber die Konsolenausgabe kommt immer noch weiter. Wir müssen sicherstellen, dass das Intervall gestoppt wird. Die Art und Weise, wie Sie Bereinigungsaktionen ausführen, wenn der Benutzer von einem beobachtbaren abmeldet, besteht darin, die Bereinigungsfunktion zurückzugeben. Aus der Observable.create gibt die Funktion, die das Observable erstellt, eine Bereinigungsfunktion zurück. Wir werden sparen, um vom eingestellten Intervall und in klar in vollen [unhörbaren] Griff zu handhaben, der es stoppen wird. Wenn ich nun auf „Start“ klicke, sehen wir die Zeit verstrichen, aber nach fünf Sekunden, wenn wir uns sowohl die Benutzeroberfläche als auch die Konsole abmelden, werden nicht mehr aktualisiert, weil wir das Intervall gestoppt haben. Es ist wirklich einfach, Kundenbeobachtbarkeiten zu erstellen, obwohl Sie es vermeiden sollten. Wenn Sie nicht müssen, wenn Sie eines der Standard-Observables verwenden und einfach einen Operator verwenden können, ist das der bessere Ansatz. Sie erhalten den Abonnenten, Sie können Wert-Schuhe ausgeben und als nächstes können Sie das beobachtbare abschließen, oder es kann Fehler ausgeben, wenn Sie möchten. Alles in allem, sehr einfach zu bedienen. Wir sehen uns im nächsten Video. 15. Themen: Hallo, Maurice hier, willkommen zurück zu diesem Kurs zur Beherrschung von RxJs 6 ohne Brechen A Sweat. In diesem Video werden wir einen Blick auf Themen und einige spezielle Themenarten werfen. Subjekte sind eine andere Möglichkeit, Observables zu erstellen, aber sie sind besonders, weil sie beide als Abonnent, als Beobachtbare nutzbar sind. Sie verwenden diese normalerweise für einige Sonderfälle, aber einer von ihnen ist Multi-Casting zu viele Observables. Sie können das gleiche Thema mehrmals abonnieren. Es ist eine spezielle Fallklasse und Sie sollten sie nicht wirklich viel verwenden. Wenn Sie eine neue beobachtbare erstellen möchten, lieber mit beobachtbar.Erstellen oder noch besser, eine der Standards, beobachtbare Erstellungsfunktionen. Es gibt drei spezielle Arten von Fächern. Wir haben das Basisklassensubjekt, das wir verwenden können, aber wir haben auch ein AsyncSubject, das nur ausgibt, wenn es abgeschlossen ist. Wir haben ein Verhaltenssubjekt, das einen Anfangswert annimmt und wann immer Sie abonnieren, wird es den verlorenen Wert emittiert, oder wenn nichts noch der Anfangswert ausgegeben wird. Wir haben das Ersetzungsobjekt, das alle zuvor ausgegebenen Werte erneut ausgibt. Oder wenn Sie die optionale Puffergröße angeben, wird es so viele Ereignisse ausgeben, die nicht unbedingt alle von ihnen sein müssen. Werfen wir einen Blick auf den Code. Beginnen wir mit dem Importieren des Betreffs von rxjs. Unser Thema ist eine Klasse, also erstellen Sie einfach eine neue mit dem neuen Operator. Wenn Sie über einen Betreff verfügen, können Sie sich abonnieren, um ein Abonnement einzurichten. In diesem Fall werde ich nur alle Werte auf die Konsole ausdrucken. Als nächstes können wir einige Werte ausgeben. Emit zwei Fesseln rxjs ist cool. Wenn wir das ausführen, können wir sehen, dass ich hier oben im Konsolenfenster gezogen bin, genau wie Sie es von einem beobachtbaren erwarten würden. Jetzt, wenn ich ein wenig zum Abonnement gehe, also nachdem das 'ist' wir zuerst rxjs ausgeben und dann 'is' und dann abonnieren und dann cool ausgeben, sehen wir nur die Ereignisse, die ausgegeben werden, nachdem wir abonnieren. Wir sehen nur cool in der Konsole. Lassen Sie uns nun die Verhaltenssubjekte anstelle der Standardthemen verwenden , die einen Anfangswert annimmt, der Start sagt. Wenn Sie abonnieren, erhalten Sie auch den zuletzt emittierten Wert. Obwohl wir abonniert haben, nachdem wir „ist“ emittiert haben, sehen Sie immer noch, ist cool emittiert. Wenn ich zum Abonnement nach oben gehe, sehen wir, dass der anfängliche Startwert auch emittiert wird. Wenn ich bis zum Ende zum Abonnement gehe, sehen wir nur das allerletzte, was ausgestrahlt wird. Cool. Versuchen wir, die Subjekte zu ersetzen. Erste Regel, keine Werte zu übergeben und wir werden den gesamten Wert zuerst ausgeben, bevor wir abonnieren. Trotzdem wird alles in der Konsole angezeigt. Mit dem Subjekt ersetzen standardmäßig werden alle ausgegebenen Ereignisse gepuffert und das neue Abonnement erhält alle von ihnen. Aber wir können die Puffergröße angeben. In diesem Fall werden nur zwei, die letzten beiden Werte emittiert. Subjekte sind wirklich nützlich, wenn Sie Observables mit mehreren Cast durchführen müssen. Oder Sie sind gegangen, um Ihren eigenen Mantel in einer beobachtbaren wickeln.Create. Aber sie sind ein [unhörbarer] Geruch, also benutze sie nicht zu viel. Die meisten Leute denken, man sollte sie nie benutzen. Wir sehen uns im nächsten Video. 16. Heiße kalten versus: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs zum Mastering RxJs 6 ohne Brechen A Sweat. In diesem Video werden wir einen Blick auf heiße vs. kalte Observables werfen. Die meisten Observables werden kalt sein. Das kalte Beobachtbare beginnt nur, wenn es ein Abonnement gibt, Daten zu emittieren. Wenn es kein Abonnement gibt, wird nichts ausgegeben. In der Regel erhält jedes Abonnement eine eigene Quelle von Ereignissen. Wenn Sie zwei Abonnenten eines beobachtbaren haben, erhalten sie ihren einzigartigen Satz von Ereignissen. Die meisten Observables in RxJs 6 sind kalt, sie tun nichts, bis Sie sie tatsächlich abonnieren, was vollkommen in Ordnung ist. Auf der anderen Seite gibt es auch heiße Observables. Heiße Observables beginnen, Werte zu emittieren selbst wenn es keine Abonnements gibt, ist es ihnen egal. Sie fangen einfach an, Daten herauszustoßen. In der Regel, wenn dies geschieht und Sie mehrere Abonnements haben, teilen sie denselben Datenstrom. Verschiedene Möglichkeiten, wie Sie Hot-Abonnements erstellen können, aber normalerweise wird es mit einem Thema durchgeführt, obwohl nicht unbedingt, es hängt wirklich davon ab, wo die Quelle der Daten erstellt wird. Werfen wir einen Blick auf dieses Verhalten im Code. Hier habe ich zwei Tastenhandler. Zuerst erstelle ich ein kaltes Observable, und dann abonniere ich es im Click-Event . Unten erstelle ich das heiße Observable, und wieder, im Click-Ereignis, abonniere ich es. Beide werden erstellt, wenn die Seite geladen wird, und beide werden nur abonniert, wenn auf ihre jeweilige Schaltfläche geklickt wird. Lassen Sie uns die Seite aktualisieren, um sicherzustellen, dass wir mit einer sauberen Folie beginnen. Warten Sie ein wenig, und klicken Sie dann auf Kalt starten. Sie sehen, dass wir Werte emittiert werden, aber es begann tatsächlich mit dem Wert 0. Lassen Sie uns die Seite erneut aktualisieren und versuchen Sie es mit hot. Sie sehen, dass wir nach einer kurzen Pause mit dem Wert 46 begonnen haben. Wir haben bei 0 nicht angefangen, wir sind in die Mitte eines Stroms von Zahlen getreten und haben angefangen, sie zu erhalten. Wie sieht der Code eigentlich aus? Für ein kaltes beobachtbares sehen Sie, dass das beobachtbare mithilfe von observable.create erstellt wird. Im Inneren beginnen wir ein Intervall und wir beginnen, Werte zu emittieren. Für das heiße Observable erstellen wir ein Subjekt und beginnen sofort, Werte zu emittieren , unabhängig davon, ob es irgendwelche Abonnements gibt. Wir hören auch nicht auf, Werte zu senden, wenn sich jemand abmeldet. Die meisten Observables sind kalt und das ist vollkommen in Ordnung. Sie müssen nichts tun, bis Sie tatsächlich Daten anfordern. Einige Observables sind heiß, geben immer Werte aus. Typische Beispiele für eine heiße beobachtbare wäre so etwas wie ein Aktienhändler. Wenn Sie zuhören oder nicht, werden Aktien gehandelt, Kauf- und Verkaufsaktionen werden ausgegeben. Wenn mehrere Personen zuhören, können sie denselben Stream anhören. Mit einer Kälte beobachtbar, wenn niemand würde Aufmerksamkeit zahlen, keine Verkäufe gemacht werden. Wir sehen uns im nächsten Video. 17. Den richtigen Bediener finden: Hallo MORRIS hier. Willkommen zurück zu diesem Kurs zur Beherrschung von Bögen ES6, ohne ins Schwitzen zu brechen. In diesem Video werden wir kurz einen Blick auf die Suche nach Operatoren werfen, die zu verwenden sind, weil es viele gibt und die richtigen finden kann wenig schwierig sein. Wir haben die RxJS-Websites und es gibt eine Menge Dokumentation über Betreiber dort. Lasst uns eigentlich einen Moment dorthin gehen. Hier haben wir zu RxJS Websites und Verweis auf alle Funktionen gibt. Es gibt eine Menge von ihnen. Wenn ich zu Operatoren scrolle, gibt es eine ziemlich Liste. Nun, wenn Sie wissen, welche Operatoren, die interessiert sind, zum Beispiel, stoppen. Sie können es einfach hier finden und dorthin gehen. Aber wenn Sie nicht wirklich wissen, welchen Operator Sie verwenden sollen, haben Sie ein Problem und welchen Operator ich lösen muss. Diese Seite ist schwer zu bedienen. In diesem Fall ist die ReactiveX-Website viel einfacher. Sie haben tatsächlich diese Entscheidungsdiagramme, um den richtigen Operator zu finden, nicht alle Operatoren sind da, aber eine Menge sind. Es ist so aufgeteilt, dass Sie tatsächlich durchgehen können. Das ist es, was ich lösen möchte. Welchen Operator würde ich verwenden? Wenn wir dies öffnen, können Sie sehen, dass es in verschiedene Abschnitte unterteilt ist undein neues Observable einstuft, ein neues Observable einstuft, bei dem es nicht um Operatoren geht, sondern viele andere Dinge. Angenommen, ich möchte Elemente von einem Observable ausgeben, nachdem sie transformiert wurden. Nun, eins nach dem anderen, verwenden Sie die Kartenfunktion. Eine beobachtbare zu der Zeit, verwenden Sie Concat-Map. Sie können sehen, dass es eine schöne Entscheidung gibt. Ich möchte nur bestimmte Items erneut emittieren, was oft passiert. Sie können verwenden, um zu filtern oder schnell oder nehmen oder verloren, oder überspringen einige usw. Es ist viel einfacher, Operatoren auf diese Weise zu finden, also benutze ich das ziemlich oft. Denken Sie daran, dass einige Operatoren anders benannt werden. Wenn wir nach Fehlern suchen, wie ich ein beobachtbares habe und ich möchte mich anmutig von einer Benachrichtigung erholen , die wir verwenden können, um den Operator zu fangen. Wir sollten Fehler fangen. ich ein wenig nach unten scrolle, werde ich Implementierungen für verschiedene Sprachen sehen, so dass wir CatchError für RxJs sehen werden. Aber wenn wir nach RxJs Catch suchen, sehen wir, dass es tatsächlich CatchError heißt. Der Grund ist, weil catch ein reserviertes Schlüsselwort ist und es eine eigenständige Funktion ist, so dass es nicht nach einem reservierten Schlüsselwort benannt werden kann. sehen uns im nächsten Video, wenn wir beginnen, verschiedene Operatoren zu verwenden. 18. Der tap: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs zur Beherrschung von RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werden wir einen Blick auf den Tap Operator werfen. Der Wasserhahn-Operator ist für Nebenwirkungen gedacht. Verwenden Sie es zum Debuggen, was ich oft tue, oder einige andere Nebenwirkungen, es dauert ein Abonnement genau wie die Abonnementfunktion, also entweder drei Funktionen für den nächsten Fehler unvollständig oder ein Objekt mit einem drei -Funktionen. Im Gegensatz zu abonnieren, aktiviert es nicht wirklich das Observable. Hier auf der RxJS-Website können Sie sehen, wir haben Dokumentation für oben mit den drei Parametern, die es braucht. Non ReactiveX-Website, können wir es auch finden, außer es heißt „Do here“. Der Grund ist der Tod in den meisten Rx-Implementierungen, reaktive X süß mit all unseren verschiedenen Sprachen verwendet, um Operator zu tun. RxJs variiert von der Anzahl der Operatoren aufgrund von Einschränkungen. Bei den meisten anderen ReactiveX-Implementierungen sind die Operatoren Funktionen nur beobachtbare Objekte. Das galt auch für RxJs. In diesem Fall war Do und catch zum Beispiel in Ordnung, aber es gibt reservierte Schlüsselwörter, na ja, Sie können sie als Funktion für ein Objekt verwenden. Sie können sie nicht als eigenständige Schlüsselwörter verwenden. Mit RxJs 6 gehen wir fähige Operatoren und sie mussten eigenständige Funktionen sein, damit sie einige von ihnen nicht umbenannten, und Do wurde umbenannt, um tippen und fangen wurde umbenannt, um Fehler zu fangen. Aus diesem Grund gibt es leichte Unterschiede in der Benennung. Ältere ReactiveX-Website ist großartig, weil die Dokumentation viel vollständiger ist und es schöne Diagramme darüber gibt, wie es funktioniert. Werfen wir einen Blick auf einige Codes, wir haben einen einfachen Timer hier, es ging für zwei Sekunden und dann emittiert, aber auch bevor wir den Timer starten, deaktivieren wir die Taste und wenn es feuert, wir aktivieren es wieder. Die Schaltfläche ist deaktiviert und wieder aktiviert, wenn der Timer ausgelöst wird. In der Tat hätte das getan werden müssen, wenn es fertig ist, aber es hat mir gesagt, dass Feuer einmal, nicht viel Unterschied. Lassen Sie uns tippen und lassen Sie uns die Pipe-Funktion verwenden, um Operator in das beobachtbare tippen. Wie abonnieren, wer eine einfache Funktion verwenden kann, fällt in die Funktion und druckt das aktuelle Element, das an die Konsole ausgegeben wird. Öffnen Sie das Konsolenfenster, Start, und nach zwei Sekunden sehen wir das Element, das ausgegeben wird. Ziemlich oft verkürzen Sie das, was ich gerade Tap and Push in Bezug auf Counsel genannt habe, wird blockieren, was tatsächlich genau das gleiche ausgibt. Nur etwas kürzere Syntax. Da sehen wir es. Jetzt habe ich in diesem Fall tatsächlich die Nebenwirkungen in der Abonnementfunktion, um den Button wieder zu aktivieren. Dort kommt der Wasserhahn-Operator ins Spiel. Ich werde verwenden, um einen Sprung zurück in den Tap-Operator abzuschließen und die Schaltfläche dort wieder zu aktivieren. Jetzt interessiert sich mein Abonnement nur für den Wert und die Nebenwirkungen wie die erneute Aktivierung der Schaltfläche oder delegiert, um den Operator zu tippen. Es funktioniert in diesem Fall, es sieht tatsächlich ein bisschen funky aus, weil ich nicht zweimal für die ersten beiden Parameter übergebe , so dass in diesem Fall Übergeben eines Objekts mit dem vollständigen Callback sinnvoller ist. Lassen Sie uns die Syntax ändern, es verhält sich immer noch genau so, wenn ich auf „Start“ klicke, deaktiviert und danach emittiert es aktiviert ist. Tap ist ein wirklich nützlicher Operator, ich benutze es zum Debuggen, aber es ist nützlich für andere Nebenwirkungen wie Deaktivieren, Aktivieren von Schaltflächen. Wir sehen uns im nächsten Video. 19. Der Kartenoperator: Hallo, Maurice hier. Wir werden zu diesem Kurs zurückkommen, um RxJs 6 zu meistern, ohne ins Schwitzen zu brechen. In diesem Video werden wir einen Blick auf den Kartenbetreiber werfen. Der Kartenoperator ist wirklich nützlich. Es nimmt die Objekte einer Eingabe und wandelt sie in einige Ausgabe-Objekte um. Grundsätzlich geht die Eingabe an die Ausgabe einer anderen Form. In einigen Fällen möchten Sie nur einen einzelnen Wert aus dem Eingabeobjekt extrahieren. In diesem Fall ist der Blockoperator eine weitere Alternative. Aber in diesem Video werde ich nur „Transform“ verwenden. Werfen wir einen Blick auf den Code. Hier habe ich ein Canvas-Beispiel, das wir vor einiger Zeit verwendet haben, als wir uns beobachtbare Streams von DOM-Ereignissen angesehen haben. Es funktioniert gut. Aber habe ich nicht abonniert, ich benutze tatsächlich die ursprünglichen Mausereignisse, alles, was da ist, also bekommen wir viel mehr Daten, als wir tatsächlich brauchen. Ich verwende auch diese globalen Kontextobjekte. Lassen Sie uns den Map-Operator importieren, um das zu beheben. Wir werden die Ereignisse durch den Kartenoperator leiten und wir extrahieren die Werte, die wir brauchen. In diesem Fall sind die OffsetX und OffsetY. Das Abonnieren erhält nicht mehr, um Ereignisbögen abzuschließen, es erhält nur an Position jetzt. Lassen Sie uns den Code aktualisieren und abonnieren, um das zu reflektieren, verwenden Sie die Position X in der Position Y. Unser Bleistift funktioniert immer noch und wir können darauf zeichnen. Großartig. Wir verwenden immer noch diese Kontextobjekte aus dem äußeren Bereich. Lassen Sie uns das auch in der Karte erfassen, weil wir das aus der eventact.targets.getcontext 2D abrufen werden. Jetzt sind wir nicht mehr von dieser Kontextvariablen aus dem äußeren Bereich abhängig. Wir posten nur alles, was der Abonnent tatsächlich braucht. Großartig. Der Kartenoperator ist sehr beliebt. Es wird viel benutzt. Es ist wirklich toll, ein Objekt von einer Form in eine andere Form zu transformieren, oder in diesem Fall muss es kein Objekt sein, irgendetwas wird tun. Wir sehen uns im nächsten Video. 20. Der filter: Hi. Maurice hier. Willkommen zurück zu diesem Kurs auf Master in RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werfen wir einen Blick auf einen sehr beliebten Operator, den Filter. Wie der Name schon sagt, wählt der Filter nur Elemente zum Flurstücken aus. Es wird jedes Element, das von der Quelle emittiert wird, beobachtbar und nur inmitten von Dingen, die den Filter auf dem Ziel beobachtbar übergeben. Wichtig zu beachten ist, dass der Filter keinen Einfluss auf die Schließung von beobachtbaren. Im Gegensatz zu einigen anderen verwandten Filter-Operatoren wie Take und First, was das tun wird. Hier können wir das Rx Marmordiagramm für Filter sehen. Wir sehen den Eingang beobachtbaren Strom mit den Werten 2, 30, 22, 5, usw. Wir sehen nur die Werte größer als 10 auf der Ausgabe beobachtbar emittiert werden. Werfen wir einen Blick auf einen Code. Ich habe hier einen kleinen Timer und es wird im Grunde jede halbe Sekunde eine neue Nummer ausgeben. Ich muss den Operator tippen, um es auf die Konsole zu drucken, und ich werde sie in der Benutzeroberfläche anzeigen, dass wir die Werte 1, 2, 3 usw. sehen , erscheinen. Lassen Sie uns dies filtern, um nur Primzahlen zu verwenden. Zuerst importieren wir den Filteroperator. Vorwärts gehen wir zu der Funktion, um Primzahlen zu filtern. Als nächstes fügen wir in der Pipe-Funktion den Filter hinzu und für jeden ausgegebenen Wert testen wir seine Primheit. Ich mache dies, nachdem ich den Tap Operator verwendet habe. Aber wenn ich auf „Start“ klicke, sehen wir alle Zahlen, die in der Konsole ausgegeben werden, aber nur die Primzahlen in der Benutzeroberfläche selbst. Nicht Reihenfolge ist wichtig, wenn ich den Filter zuerst und tippe, den zweiten Operator, dann werde ich zuerst filtern und dann auf die Konsole drucken. Jetzt werde ich nur Primzahlen in der Konsole sehen. Filter und andere sehr Pappel-Operator für ziemlich wenige Filter wie Operator für sehr unterschiedliche Anwendungsfälle. Wir sehen uns im nächsten Video. 21. Die take die and: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs zur Beherrschung von RxJS6, ohne Schweiß zu brechen. In diesem Video werden wir einen Blick auf nehmen Betreiber und die damit verbundene nehmen verloren. Der Take-Operator lässt Sie die erste x Anzahl der Elemente zu einem beobachtbaren emittiert nehmen, nehmen letzten ist zwei entgegengesetzte. Es wird Ihnen die letzte x Anzahl von Werten geben, die seine eigene beobachtbar emittiert werden. So nehmen unterscheidet sich von Filter, Filter ändert sich nicht, wenn das Observable geschlossen wurde. Nehmen Sie wird das beobachtbare schließen, sobald die Anzahl der Werte zu unserer Front erfordern. Hier sehen wir das rx Murmeln Diagramm für nehmen. So gibt die Eingabe beobachtbar eins, zwei, drei und vier aus. Wir nehmen nur die ersten beiden. Also bleiben wir mit eins und zwei übrig. Verlieren Sie sich mit einem. Auch hier gibt die Eingabe eins, zwei, drei und vier aus. Take lost emittiert nur vier, aber beachten Sie, dass es nur ausgegeben wird, wenn die Eingabe beobachtbar geschlossen ist. Nur dann weiß es, was wirklich das letzte Element ausgegeben wird? Werfen wir einen Blick auf einen Code. Hier habe ich eine Schaltfläche mit einem Intervall, das jede halbe Sekunde einen Wert ausgibt. Wir werden in das Konsolenprotokoll drucken. Wir werden es in der Benutzeroberfläche und Benutzeroberfläche anzeigen wir werden auch die Tatsache anzeigen , dass die beobachtbare abgeschlossen wurde. Jetzt gibt das Beobachtbare nur weiterhin Werte aus, weil wir nie aufgehört haben. Nehmen wir die ersten fünf Werte. Wir werden importieren, um Operator zu nehmen, und dann werde ich die beobachtbare wahr, um Operator zu nehmen. Es wird fünf in, um die ersten fünf Elemente zu nehmen. Dort sehen wir die Gegenstände erscheinen und das beobachtbare vollständig ist. Lasst uns das ändern, um verloren zu gehen. Wir nehmen die letzten fünf Elemente. Wenn ich auf Start klicke, sehen Sie Zahlen, die vom Tap Operator ausgegeben werden, vorher verloren geht, aber nichts erscheint in der Benutzeroberfläche. Das liegt daran, dass die Eingabe beobachtbar nie geschlossen wird. Also nehmen verloren weiß nicht, wann man Werte ausgibt. Lassen Sie uns diesen Operator verwenden, um die ersten 10 Werte zu nehmen, die dem beobachtbaren danach am nächsten kommen. Dann werden wir nehmen last verwenden, um die letzten fünf Werte davon zu nehmen. Wir können im Konsolenprotokoll sehen, dass 10 Werte ausgegeben wurden, aber in der Benutzeroberfläche sahen wir nur abgeschlossen. Das liegt daran, dass Sie die letzten Emitationen nach Abschluss nehmen. Aber wenn wir bewegen, um den Operator als letzten Operator tippen, können wir tatsächlich sehen, was in der Konsole ausgegeben wurde. Klicken Sie erneut auf Start. Es gibt Werte aus. Nehmen Sie Verluste, erfassen sie, und jetzt gibt es die verlorenen fünf Werte aus. Also nehmen und nehmen verloren sind ziemlich nützlich, um eine Teilmenge der emittierten Elemente zu erfassen . Der erste oder der letzte. Wenn Sie nur sehr zuerst, oder sehr verlorene Ergebnisse über den ersten und den letzten Operator wollen, die nützlich sind. Sie nehmen auch ein Prädikat und den Standardwert für den Fall nichts zu dem Zeitpunkt emittiert wird, zu dem das beobachtbare schließt. Fähigkeiten, die nehmen und nehmen verloren nicht haben. So sehen wir uns im nächsten Video. 22. Der takeWhile: Hallo Marie Aktie. Wir werden auf diesen Kurs zurückkommen, um Arcs ES6 zu meistern, ohne ins Schwitzen zu brechen. Also in diesem Video, werden wir einen Blick auf einen anderen Operator nehmen um Daten der TakeWhile, Operator zu filtern. Der TakeWhile ist wie der Filteroperator und der Take-Operator kombiniert. Es dauert die erste Anzahl von Elementen, die auf beobachtbare emittiert werden, aber die Anzahl der Elemente, die emittiert werden. Es dauert abhängig von den Prädikaten. Im Gegensatz zu nehmen, die eine feste Zahl benötigt, wird es ein Prädikat genau wie der Filter verwenden. Im Gegensatz zu dem Filter, der das beobachtbare offen hält und nur alles ausgibt, was passiert, wird TakeWhile Ihre beobachtbare schließen, sobald das erste zugewiesene Element den Filter nicht passiert. Hier können Sie sehen, die Bögen Murmeln Diagramm für nehmen, während sehen die Filterbedingung ist x kleiner als fünf und sobald sechs emittiert wird, wird die Ausgabe beobachtbar geschlossen, und Sie können sehen, ob ich die sechs nach den vier die vier bewegen hat es geschafft, und wenn ich zu sieben früher bewegt, Tod am nächsten an String. Werfen wir einen Blick auf einen Code. Wieder haben wir ein kleines Intervall, das alle 500 Millisekunden eine neue Zahl ausgibt. Lassen Sie uns zu TakeWhile Operator importieren und Elemente nehmen, solange wir unter fünf sind. Wenn ich jetzt starten klicke, sehen wir die ersten fünf Elemente, die ausgegeben werden, aber sobald wir fünf erreichen, ist Sie beobachtbar geschlossen. Nehmen Sie Brunnen durchaus üblich Modelle vielseitig als Filter, aber immer noch sehr nützlich. Denken Sie daran, dass es tatsächlich schließt die Ausgabe beobachtbar. Wir sehen uns im nächsten Video. 23. Der Betreiber von takeUntil: Hi, ich bin Maurice hier. Willkommen zurück zu diesem Kurs zur Beherrschung von RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werden wir einen Blick auf TakeUntil Operator werfen. Dieser TakeUntile-Operator ist sehr ähnlich zu TakeWhile Operator. Es braucht Werte, die von einem beobachtbaren Strom emittiert werden , und gibt Werte aus, bis es angewiesen wird, zu stoppen. Wir mögen TakeWhile nicht, das ein Prädikat verwendet, TakeUntil verwendet tatsächlich einen anderen Stream, um zu bestimmen, wann zu stoppen. Hier sehen Sie das Diagramm der orangefarbenen Murmeln. Sie können sehen TakeUntil nimmt Elemente aus dem ersten Stream, bis der zweite Stream emittiert. Wenn ich das erste Element im zweiten Stream verschiebe, können Sie sehen, dass das resultierende beobachtbare tatsächlich eine Änderung ist. Werfen wir einen Blick auf den Code. Genau wie zuvor habe ich den Start-Button, der auf ein Klick-Ereignis hört und wir starten ein Intervall, das alle 500 Millisekunden emittiert. In diesem Fall habe ich auch die Stopp-Taste und jetzt verwenden Sie die Forum-Events-Funktion, um ein Observable zu erstellen, wenn wir darauf klicken. Ich werde den Operator dort tippen, nur damit wir sehen können, wenn wir darauf klicken. Beachten Sie, dass ich das Stop-Ereignis nicht abonniere. Wenn ich auf Start klicke, sehen wir Werte, die emittiert werden. Aber wenn ich auf Stopp klicke, sehen wir nichts passiert. Die Konsolenmeldung wird nicht angezeigt, weil wir dieses Ereignis nicht wirklich abonnieren. Lassen Sie uns die Stopp-Taste verwenden, um die Intervallzeichenfolge zu stoppen. Ich werde TakeUntile-Operator und durch den Intervallstrom durch TakeUntil und Richtlinie in der Stoppzeichenfolge dort importieren . Ich klicke auf Start und der Ereignisstream läuft, ich klicke auf Stopp und es stoppt. Beachten Sie, dass, wenn ich nur auf Stopp klicke, nichts passiert, weil es noch keine beobachtbaren Features gibt. Wir müssen den ersten Stream starten, bevor der zweite Stream abonniert wird. TakeUntil ist sehr nützlich. Es kombiniert zwei Streams, einen Eingabestream und einen anderen Stream, um zu bestimmen, wann Ereignisse aus dem Eingabestrom nicht mehr aufgenommen werden sollen. Denken Sie daran, dass es den Ausgabestrom schließt, sobald der zweite Stream ausgestrahlt wird. Wir sehen uns das nächste Video. 24. Scan- und Verringerung von Operatoren: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs auf Master RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werden wir einen Blick auf zwei sehr vergleichbare Operatoren werfen, den Scan und den Reduct. Sie sind fast gleich. Der Scan-Operator nimmt eine Akkumulatorfunktion die das vorherige Ergebnis und den aktuellen Wert ausgibt, und offensichtlich nimmt es einen Anfangswert und dann wird es jeden Wert aus dem Akkumulator emittieren. Hier sehen wir den Scan-Operator am Rx-Marmorgelände. Sie können für jeden Wert sehen, der auf dem Eingang beobachtbar emittiert wird, erhalten wir einen Wert, der auf dem Ausgang beobachtbar emittiert wird, das Ergebnis der Wiederholung des Akkumulators für jeden Wert. Der Reduce-Operator verwendet genau die gleichen Parameter, eine Akkumulatorfunktion, die den vorherigen und den aktuellen Wert ausgibt, und einen optionalen Anfangswert. Der Unterschied besteht jedoch darin, dass es nur ausgegeben wird, wenn die Eingabe beobachtbar geschlossen ist. Hier sehen wir den reduzierten Operator auf den Rx-Marmorseiten, und bemerken, dass es nur einmal am Ende emittiert, wenn die Eingabe geschlossen wird. Werfen wir einen Blick auf das im Code. Ich habe einen Beispielcode, und ich beginne mit einer Reihe von ein paar Zahlen. Wenn ich auf den Start-Button klicke, sehen wir nur die ausgegebenen Zahlen und ich sehe die letzte Zahl, die eine fünf in der Benutzeroberfläche ausgegeben wurde. Lassen Sie uns importieren scannen und reduzieren, und lassen Sie uns zuerst verwenden, um den Operator zu scannen. Der Scan übernimmt eine Funktion, die als erster Parameter ein vorheriges Ergebnis aufweist und der aktuelle Wert als zweiter Parameter ausgegeben wird. Beim ersten Mal wird der vorherige Wert der Anfangswert sein, den wir übergeben. Wenn kein Anfangswert übergeben wird, führt der allererste Wert, der ausgegeben wird, nicht dazu, dass der Akkumulator läuft, sondern nur an der zweiten. Dann ist der erste Wert der vorherige und der zweite Wert, der ausgegeben wird, ist der Strom. Aber im Allgemeinen verwende ich immer einen Anfangswert, und wenn ich den Start-Button jetzt drücke, sehen wir die Summe von 1-5, die 15 Peilung ist. Lassen Sie uns das gleiche mit der reduzierten Funktion tun, anstelle von Scan werden wir reduzieren verwenden, und wenn ich „Start“ drücke, sehen wir genau die gleiche Ausgabe. Wir können den Unterschied zwischen Scannen und Reduzieren jetzt nicht wirklich erkennen, also nehmen wir ein Intervall statt eines festen Bereichs von Zahlen, und der große Unterschied hier ist natürlich, dass das Intervall nicht geschlossen wird, weil die Zeit weiter nimmt. Mit Scan-Operator sehen wir alle sofortigen Summen der ausgegebenen Werte und wenn wir dasselbe mit dem Reduce-Operator versucht haben, das nicht passieren. Wenn ich auf „Start“ klicke, sehen wir Werte, die in der Konsole ausgegeben werden, aber in der Benutzeroberfläche sehen wir Ihre Ergebnisse nicht wirklich. Das liegt daran, dass das Intervall offen bleibt, es nicht abgeschlossen ist, also gibt Reduce niemals tatsächlich einen Wert aus. Lassen Sie uns den Take-Operator importieren und die ersten 10 Werte aus dem Intervall nehmen. Jetzt wird das beobachtbare abgeschlossen und reduziert, nachdem 10 Werte emittiert werden, die Ergebnisse der Summe aller emittierten Zahlen emittieren. Scannen und reduzieren, sehr ähnlich, beide nehmen eine Akkumulatorfunktion mit einem optionalen Anfangswert. Der Unterschied besteht darin, wenn sie emittieren, jedes Mal scannen, Emitate nach Abschluss reduzieren, normalerweise reduziert einen großartigen Operator zu verwenden, aber es funktioniert nur, wenn Sie eine beobachtbare haben, die am nächsten ist. So sehen wir uns im nächsten Video. 25. Der paarweise Betreiber: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs zur Beherrschung von RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werden wir einen Blick auf den paarweisen Operator werfen, der in einigen Fällen sehr nützlich sein kann. Der paarweise Operator kombiniert im Grunde zwei Elemente die auf dem Eingang beobachtbar auf den Ausgang emittiert werden beobachtbar. Jedes Ereignis, das an der Ausgabe beobachtbar ausgegeben wird, ist ein Array, das zwei Werte enthält, wobei der vorherige und der aktuelle Wert ausgegeben wird. Es gibt zwei ähnliche r-Operator, BufferCount, ein bisschen flexibler ist, weil Sie die Array-Größe angeben können, die ausgegeben wird , es muss nicht zwei sein, oder BufferTime, die Zeitspanne benötigt und nur alle ausgegebenen Elemente sammelt in einer Zeitspanne und gibt sie als ein Array aus. Hier können Sie den paarweisen Operator auf der Website des RxMarble sehen. Sie können sehen, dass die beobachtbare Eingabe A, B, C, D, E, F emittiert B, C, D, E, . Die Ausgabe beobachtbar gibt die Arrays A, B, B, C, D usw. Das allererste Element hat kein entsprechendes Element, das auf der Ausgabe ausgegeben wird, sondern alle nächste sind ihre Werte mit dem vorherigen. Werfen wir einen Blick auf einen Code. Hier habe ich das Canvas-Sample wieder, das wir vorher benutzt haben. Denken Sie daran, wenn ich die Maus über Canvas bewegen, können wir darauf zeichnen, aber es zeichnet Punkte, wo die Maus ist. Wenn ich die Maus schnell bewegen, erhalten wir mehr Trennung zwischen den Punkten, wenn ich es verlangsamt bewegen sind nah beieinander. Mit diesen Punkten und paarweise können wir diese tatsächlich in eine Linie verwandeln. Lassen Sie uns zuerst den paarweisen Operator importieren. Dann, nachdem wir unsere Ereignisse abgebildet haben, verwandeln wir es in Paare, indem wir es an paarweise Operator weiterleiten. Jetzt in unserem Abonnieren erhalten wir Paare von Positionen, nicht nur einzelne Positionen. Lassen Sie uns die [unhörbare] Strukturierungssyntax verwenden, um die Von- und die zu-Position aus dem Paar zu erhalten. Wir werden den Kontext von der ersten bekommen, spielt keine Rolle, welche der beiden wir verwenden. Jetzt verwenden Sie die Kontext-API, beginnen Sie, bewegen Sie sich zu Zeile zwei und Strich. Wir können tatsächlich eine kleine Linie zwischen den beiden Punkten ziehen. Natürlich sollte paarweise ein Funktionsaufruf sein. Also, wenn ich jetzt die Maus über Canvas bewege, erhalten wir eine schöne Linie anstelle einer Reihe von separaten Punkten. Paarweise kann sehr nützlich für diese Art von Situationen sein, in denen Sie Dinge koppeln möchten. Die BufferCount-Operatoren sind etwas flexibler , da Sie die genaue Puffergröße angeben können, die Sie wollen. Wir sehen uns im nächsten Video. 26. Die FlatMap, MergeMap, concatMap und mergeMap,: Hallo, Maurice hier, willkommen zurück zu den Partituren von Master RxJs 6 ohne Breaking A Sweat. In diesem Video werden wir einen Blick auf verschiedene Kartenbetreiber werfen. Sie sind im Grunde alle so konzipiert, dass ein beobachtbares in ein anderes Observable abgebildet wird, also schauen wir uns an: FlatMap, MergeMap, ConcatMap und SwitchMap. Zuerst schauen wir uns FlatMap und MergeMap an, und wir werden sie zusammenfassen, weil FlatMap nur ein Alias von MergeMap ist. Sie sind wirklich genau das Gleiche. MergeMap beginnt, Ereignisse von einem verschachtelten Observable auszugeben, sobald das äußere beobachtbare emittiert. MergeMap emittiert grundsätzlich alle Werte aus verschachtelten Observables, unabhängig davon, was passiert. Wenn das äußere beobachtbare dreimal emittiert, startet es das verschachtelte beobachtbare dreimal und es wird nur weiterhin Ereignisse von all diesen Observables emittieren, also sind sie alle miteinander verschachtelt, es gibt wirklich keine erkennbare Ordnung gibt es zwischen ihnen. ConcatMap ist etwas anders. ConcatMap gibt auch Ereignisse aus dem verschachtelten Observable aus, wenn das äußere beobachtbare emittiert, aber es wartet darauf, dass das verschachtelte Observable abgeschlossen ist, bevor es das nächste startet, also gibt es keine Verschachtelung und alles ist schön geordnet. Es wartet jedoch immer noch darauf, dass das verschachtelte Observable abgeschlossen Wenn es nicht abgeschlossen ist, wird es nicht erneut ausgelöst. Hier sehen Sie das RxMarbles Diagramm für ConcatMap und Sie werden sehen, ob ich zu C- oder B-Ereignissen auf der äußeren beobachtbaren, dass die Observables nur in die Warteschlange gestellt sind. Die letzte Kartenfunktion, die wir uns ansehen werden, ist SwitchMap. SwitchMap ist etwas wie ConcatMap, da alles schön geordnet ist, aber in diesem Fall, wenn das äußere beobachtbare wieder ausgibt, wird es das innere Observable abbrechen. Hier sehen Sie das RxMarbles Diagramm. Beachten Sie, wenn ich die Ereignisse auf dem äußeren beobachtbaren verschieben, dass Ereignisse aus dem inneren beobachtbaren fallen gelassen werden, wenn ich das B nach links verschiebe, so dass es früher ausgelöst wird, sehen wir, dass nicht alle verschachtelten Ereignisse von der ersten in unserem beobachtbaren tatsächlich Feuer. Werfen wir einen Blick auf einen Code. Hier haben wir einige Beispiel-Code. Das im Freien beobachtbare ist im Grunde ein Klick, der von der Startschaltfläche aus beobachtet werden kann, also verwenden wir es von Ereignissen, um ein beobachtbares zu erstellen. Ich pipe das in einen Scan-Operator, nur damit wir inkrementierende Werte erhalten und wir sehen können, welcher Klick es ausgelöst wird. Wenn ich auf die Schaltfläche „Start“ klicke, sehen wir die Nummer 1, 2 usw. Lassen Sie uns die MergeMap verwenden und das verschachtelte Observable in diesem Fall ist nur ein Bereich von Zahlen 1-5 und ich verwende den Kartenoperator, um es in eine kleine Zeichenfolge zu verwandeln zeigt Ihnen , von welchem Klick es stammt oder welches Ereignis es sich im verschachtelten Observable befindet. Wenn ich auf „Start“ klicke, sehen wir fünf Ereignisse ausgegeben werden und wenn ich ein paar Mal auf „Start“ klicke, sehen wir genau das gleiche, was wieder ausgegeben wird. Versuchen wir es mit ConcatMap und wir erhalten genau die gleiche Ausgabe. Auf den ersten Blick sieht es so aus, als hätten sie sich genau gleich verhalten. Lassen Sie uns schnell versuchen SwitchMap und wieder erhalten wir die gleiche Ausgabe. Es scheint kein großer Unterschied zu sein. Der Grund ist, dass das verschachtelte Observable aus einem Bereich erstellt wird, so dass es wirklich schnell läuft und es ist bereits getan, wenn wir erneut klicken. Versuchen wir es mit einem Intervall, also werden wir alle Sekunden ein Ereignis im verschachtelten Observable ausgeben und fünf Ereignisse wieder nehmen. Wenn ich mehrmals auf „Start“ klicke, sehen Sie, dass Ereignisse verschachtelt sind. Wir bekommen Klick- und Events sind alle miteinander verschachtelt und es gibt keine wirklich gut erkennbare Ordnung dort. Lassen Sie uns jetzt von MergeMap zu ConcatMap wechseln, und wenn ich mehrmals auf „Start“ klicke, sehen wir ein ganz anderes Verhalten. In diesem Fall sehen wir alle Ereignisse von Click 1 und wenn das fertig ist, sehen wir alle Ereignisse von Click 2 und dann alle Ereignisse von Click 3, so dass alles gut in Ordnung ist. Nun, wenn ich das Take Five entferne, haben wir im Grunde ein verschachteltes Observable, das nie abgeschlossen ist. Wenn ich klicke, werden alle Ereignisse von Click 1 angezeigt, aber wenn ich noch ein paar Mal klicke, sehen wir nie wirklich Ereignisse, es wartet darauf, dass das verschachtelte beobachtbare abgeschlossen ist, was es jetzt nie ist. Werfen wir einen Blick auf SwitchMap. Wenn ich auf „Start“ klicke, werden die Ereignisse vom ersten Klick angezeigt, aber wenn ich erneut auf „Start“ klicke , wird der erste verschachtelte Ereignisstrom abgebrochen und ein zweiter beginnt. Wenn ich mehrmals auf „Start“ klicke, jedes Mal ein neuer Ereignisstream angezeigt, der erste wird jedoch abgebrochen. Es gibt mehrere Kartenoperatoren, um Streams zu kombinieren, sie sind alle ähnlich, unterscheiden sich jedoch geringfügig darin, wie sie verschachtelte Ereignisströme verarbeiten Wählen Sie also den für einen bestimmten Job benötigten, wir schauen uns an, was mit dem verschachtelter Ereignisstrom, wenn mehrere Ereignisse im äußeren Ereignisstrom auftreten. Sie sind alle nützlich, sie alle haben ihre Anwendungsfälle. Wir sehen uns im nächsten Video. 27. Der Anfang The: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs von Mastering RxJs 6 ohne Brechen A Sweat. In diesem Video werden wir einen Blick auf den StartWith Operator werfen. StartWith ist ein Operator, mit dem Sie ein erstes Ereignis hinzufügen können , bevor alle anderen ausgegeben werden. Wir werden nur einen Wert einfügen und dann weiterhin alle anderen Ereignisse emittieren, die er empfängt. Dies ist das [unhörbare] Murmeldiagramm für StartWith. Sie können sehen, dass die ursprüngliche beobachtbare emittiert zwei und drei, aber startWith beginnt mit einem, also gibt es eins, zwei und drei aus. Werfen wir einen Blick auf einige Codes. Grundsätzlich haben Sie das gleiche Setup wie im letzten Video, in dem wir Form von Ereignissen verwendet haben, um einen Ereignisstrom zu erhalten, wechseln Sie zu einem Intervallstrom mit Switch-Map, aber das Intervall wird nur einmal alle zweieinhalb Sekunden ausgelöst. Wenn ich auf „Start“ klicke, sehen wir für zweieinhalb Sekunden nichts passiert. Es gab eine ziemliche Verzögerung. Lassen Sie uns ein sofortiges Ereignis hinzufügen, sobald wir klicken. Wir werden StartWith importieren, und dann werden wir startWith in die Pipe-Funktion einschließen. Wir beginnen mit dem Ereignis mit dem Wort Start. Lassen Sie uns es tatsächlich unter die Map-Funktion verschieben. Das erste Ereignis wird nur starten, und dann werden die nächsten Ereignisse zeigen, welcher Klick es war und welche Ereignisnummer es war. Wenn ich nun auf „Start“ klicke, sehen wir Start sofort erscheinen, und nach zweieinhalb Sekunden sehen wir die Ereignisse vorbei. Wenn ich wieder auf „Start“ klicke, sehen wir Start sofort wieder erscheinen. Der StartWith Operator ist wahrscheinlich nicht der häufigste Operator, aber es ist sehr nützlich. Ich habe eine Reihe von Orten, an denen ich das tatsächlich in meinem Code verwendet habe. Wir sehen uns im nächsten Video. 28. Benutzerdefinierte Operatoren: Hallo, da. Willkommen zurück zu diesem Kurs auf Master RxJs 6 ohne Schwitzen zu brechen. In diesem Video werden wir einen Blick auf die Erstellung von benutzerdefinierten Operatoren werfen. Erstellen benutzerdefinierter Operatoren ist ziemlich einfach und sehr nützlich. Der beste Weg ist, mit einem der Standard-Operatoren zu beginnen. Wenn Sie wirklich etwas tun, das mehr Spezialisierung eines der Standard-Operatoren ist. Starten Sie ihre Wiederverwendung bei und Sie sind wirklich schnell fertig. Wenn Sie mehr Flexibilität benötigen, ist Grading und beobachtbar mit beobachtbaren Punkt erstellen der Weg zu gehen. Werfen wir einen Blick auf den Code. Hier habe ich das Beispiel, das wir vorher gemacht haben, als wir nach Primzahlen gefiltert haben. Ich benutze im Grunde den Filteroperator, suche nach Primzahlen und das ist die Funktion, die wir tatsächlich aufrufen. Es funktioniert wie ein Zauber. Nehmen wir an, wir wollen prim mehr wie ein Operator anstelle von etwas, das wir im Filter aufrufen. Also benutze es so. Wenn ich versuche, es so zu nennen, erhalten wir einen Laufzeitfehler. Es ist noch kein Operator, es ist nur eine einfache Funktion. Aber es ist ziemlich einfach, diese Funktion in einen Operator zu verwandeln. Wir beginnen mit dem Import des Filter-Operators und wir kehren nur zum Filteroperator mit den erforderlichen Parametern zurück. In diesem Fall erhält es die Nummer, die übergeben wird. und wir geben zurück, ob diese Zahl eine Primzahl ist oder nicht. Es funktioniert genau so, wie Sie es erwarten würden. Wirklich einfach. Grundsätzlich ist alles, was wir getan haben, nur zum Filteroperator von der Innenseite der Pipe zu einer separaten Funktion verschoben, wo es wiederverwendbar ist. Angenommen, Sie müssen etwas flexibler sein und nur den Standardoperator verwenden, schneidet es nicht, wir können mit beobachtbaren Punkt erstellen beginnen, wird wieder eine Funktion exportieren, aber jetzt werden wir beobachtbar verwenden, um abonnieren Sie die übergeordnete beobachtbare. Die Parameterquelle ist also eine Quelle beobachtbar, die wir verwenden und dann beobachtbare Punkt erstellen Neustarts, abonnieren Sie Punkte und hören Sie das Ereignis und emittieren, was wir emittieren wollen. In diesem Fall alle Primzahlen. So implementieren wir den ersten Parameter, um den nächsten Handler zu abonnieren. Jedes Mal, wenn eine Zahl ausgegeben wird, überprüfen wir, ob es eine Primzahl ist und ob es ist, geben wir sie erneut an diesen Beobachter aus. Behoben meinen Tippfehler und die Künstler, wir bekommen die Primzahlen wieder. Das ist fast richtig. Die Sache, die fehlt, ist die Behandlung von Fehlern und die Fakten, die das beobachtbare schließen. Fügen wir den Fehler-Handler und den Complete-Handler als zweiten und dritten Parameter hinzu. Wieder, wir werden einfach alles an das nächste Beobachtbare weitergeben. Keine Notwendigkeit, etwas Spezifisches hier zu behandeln und alles funktioniert immer noch. In diesem Fall machen wir eigentlich nichts mit Fehlern oder Fertigstellungen. Wir sehen also keinen Unterschied, wenn wir es ausführen. Das Erstellen benutzerdefinierter beobachtbarer Operatoren ist wirklich einfach. Wenn Sie einen Standard-Operator wiederverwenden können, gut für Sie, tun Sie es, es ist der einfachste Weg. Andernfalls erstellen Sie einfach ein neues Observable und emittieren, was Sie von der Eingabe emittieren möchten. Möglicherweise werden Werte für die Wertefilterung aktualisiert oder vielleicht sogar noch mehr Elemente ausgegeben. Wir sehen uns das nächste Video. 29. Testen: Hallo Maurice hier. Wir kommen zurück zu diesem Kurs zum Mastering RxJs 6 ohne Schweiß zu brechen. Also in diesem Video werden wir einen Blick auf Testoperator und beobachtbare Streams werfen. In einigen einfachen Fällen, wie dem Primzahloperator, wird ein einfacher Standard-Unit-Test tatsächlich tun. Aber in vielen Fällen ist das nicht ganz genug und wir wollen mehr. Es ist also eine wirklich nützliche Bibliothek auf npm namens RxJS Murmeln, die eine Marmor-Test-Bibliothek ist. So können Sie den von Ihnen erwarteten Strom als Marmordiagramm beschreiben. Sie können tatsächlich testen, ob das resultierende beobachtbare ist, was Sie erwarten. Wirklich einfach zu bedienen und es funktionierte mit vielen verschiedenen Test-Frameworks. Ich werde Jest benutzen, aber es wird genauso gut mit Jasmine oder EVA oder Mocha funktionieren. Werfen wir einen Blick auf den Code. Hier habe ich zwei Hauptbetreiber, die wir im vorherigen Video erstellt haben. Ich benutze die einfache Version, verlängere nur den Filteroperator und nur als Erinnerung, wenn ich es ausführe, klicke ich auf Start, wir sehen alle Primzahlen erscheinen. Großartig. Also lasst uns einen Komponententest dafür schreiben, den ich gerade eingerichtet habe. Also, wenn ich das ausführe und ich die Strich-, Strich Schwartz-Optionen hinzufüge, so bleibt nur aktiv 14 zu Quelldateien und wir führen Tests nach Bedarf durch. Wir können tatsächlich mit dem Testen beginnen. So können Sie sehen, dass es bereits eine Testdatei gibt grundiert ist, um den ganzen Scherz zu testen, aber es gibt keinen Test darin, also scheitert nur tatsächlich. Es erwartet ein Minimum von einem Test. Lassen Sie uns zuerst das einfache tun, Sie Standard-RxJS-Operatoren und Observables und Jest-Testfunktionen. Daher sind keine zusätzlichen Bibliotheken erforderlich. Also werden wir den Bereich verwenden, um einen Bereich von Zahlen zu erstellen, und ich werde verwenden, um den Operator zu reduzieren, um dies in ein einzelnes Array zu reduzieren, gegen das wir testen können. Also werden wir einen Bereich erstellen, der von eins mit der Nummer fünf ist primäre Funktion beginnt und wir werden verwenden, um das in ein einzelnes Array zu reduzieren. Unser Abonnement wird nur einmal mit vollständigen Ergebnissen ausgelöst. Lassen Sie uns also testen, ob das resultierende Prime-Array gleich einem bekannten Array ist. Also fügen wir die Zahlen 1, 3, 5, 7 und 8. hinzu. Also haben wir hier tatsächlich einen fehlgeschlagenen Test, weil 1 und 8 keine primäre Zahl sind. Wenn wir jedoch einen Jest-Ausgang betrachten, sehen wir den Testlauf und es geht. Es scheitert nicht. Warum ist das so? Nun, der Test ist asynchron. Observables sind asynchron, daher endet die Erwartung nach den Tests als bereits abgeschlossen. Indem wir also das Don't Call Back hinzufügen, können wir tatsächlich sicherstellen, dass Jest auf den Abschluss unseres Tests wartet. Jetzt sehen wir einen fehlgeschlagenen Test. Wir können sehen, dass 1 und 8 nicht erwartet werden , aber die Zahl 2 wurde erwartet, weil das eine Primzahl ist. Lassen Sie uns die Erwartung aktualisieren. Ändern Sie 1 zu 2 und entfernen Sie 8 und unsere Tests werden bestehen. Es Jest läuft und Berichte sind Tests als grün. Großartig. Jetzt einfacher Fall wie dieser, würde das tatsächlich funktionieren, aber wenn wir ein bisschen mehr testen wollen, als das wird es nicht schneiden. Eine wirklich nützliche Bibliothek beim Testen von RxJS-Operatoren und Streams RxJS-Murmeln. Also lassen Sie uns Murmeln importieren und einen neuen Test erstellen, Testen Für Primzahlen bis zu 10. Wir haben einen neuen Test, aber anstatt einen Callback bereitzustellen, werden wir den Callback in die Marmorfunktion einschließen. Es wird uns einen Kontext geben, in dem wir Observables erstellen und Observables testen können. Mit context.cold kann ich also ein kaltes Observable erstellen und hier beschreibe ich, wie mein Observable aussehen sollte. Jede Position ist also ein 10 Millisekunden-Fenster. Also werden wir 10 Millisekunden warten, 1 emittieren, weitere 10 Millisekunden warten, 2 usw. den ganzen Weg bis 9 Gewichte, 10 Millisekunden und dann die vertikale Pipe bedeutet schließen das Beobachtbare. Also, das sind unsere Eingangsnummern beobachtbar. Wir können die ähnlich aussehende Erwartung schaffen. Also die Primzahlen beobachtbar. Es ist die gleiche Zeichenfolge, außer jetzt werden wir zu einer für die 6 zu 8 und die 9 bewegen , weil es sich nicht um Primzahlen handelt. Also, jetzt kann ich einen resultierenden beobachtbaren Strom erstellen, indem ich die Pipe Prime-Operator auf die Anzahl der beobachtbaren und das sollte nur Primzahlen zurückgeben. Mit dem Kontext Punkt erwarten, können wir testen, ob diese Ergebnisse unsere erwartete Primzahl beobachtbar sind. Dort läuft Jest und wir haben eine bestandene Tests. Jetzt habe ich immer gerne einen fehlgeschlagenen Test. Wenig paranoid, ich wollte meinen Test scheitern sehen. Es ist ziemlich einfach, Tests zu schreiben, die nicht fehlschlagen. Also lasst uns neun als unerwartete Primzahl aufzeichnen, was natürlich nicht ist, und wir sehen, dass der Test fehlschlägt die Zahl neun mehr ausgegeben wird, aber genau so erwartet wird, wie wir es erwarten. Also lassen Sie es uns entfernen und unser Test ist wieder grün. Also das funktioniert, ist aber ziemlich einfach. In der Tat, wenn wir anfangen wollen, höhere Zahlen zu emittieren, können wir es nicht so tun, weil jede Ziffer innerhalb des Marmorstroms etwas ist, das emittiert wird. Also, wenn wir eine höhere Zahl emittieren wollen, können wir dies tun, aber wir müssen einen zweiten Parameter zu den contexts.cold hinzufügen, wenn wir die beobachtbare erstellen, die der tatsächliche Wert ist. Einige Einstufung von Werten Objekt mit A 11, b 12 usw. Dann in context.cold, werde ich A, B, C, D, E emittieren und wenn ein A emittiert wird, sieht es, dass es einen Wert, A auf dem Werteobjekt, und es wird tatsächlich den Wert anstelle von zwei aufgelisteten Ziffern emittieren. Auf diese Weise können wir alles aussenden, was wir wollen. So können wir die erwarteten Primzahlen auf die gleiche Weise beobachtbar erstellen. Natürlich sind B, D und E keine Primzahlen, da 12, 14 und 15 keine Primzahlen sind, so dass nur A und C übrig sind. Jetzt, wenn wir den Test mit Jest ausführen, geht es vorbei. Das ist wirklich schön, lassen Sie uns für einen Moment von der einfachen Implementierung zum Operator wechseln , indem Sie observable.create verwenden. Wir sehen, dass der Test noch besteht. Aber jetzt, wenn ich vergesse oder einen Fehler mit Abschluss mache, schlägt unser Test auch fehl, weil mit dem vertikalen Balken im Beobachtbaren tatsächlich das Schließen eines Streams bezeichnet. Es erwartet also eine Schließung, aber es passiert nicht, weil wir einen Fehler in unserem Operator gemacht haben und unser Test fehlschlägt. Wir testen nicht innerhalb der Fehlerbedingung, aber wenn wir es taten, würde genau das Gleiche passieren. Also fixiere das Kabel und der Test ist wieder grün. Das Erstellen von Standard-Komponententests kann daher nützlich sein. Es war nützlich in einem einfachen Fall wie diesem. Aber in vielen Fällen, in denen Sie mehr als nur einen einzelnen Operator mit dem einzelnen Wert testen möchten , benötigen Sie ein bisschen mehr in der RxJS-Marmorbibliothek macht es wirklich einfach. Arbeiten Sie mit vielen verschiedenen Testbibliotheken. Funktioniert mit beobachtbaren Strings, nicht nur einem einzigen Operator, und macht es wirklich einfach, alles zu testen. So sehen wir uns im nächsten Video. 30. Scenarios Einführung: Hallo, Maurice hier. Willkommen zurück zum Kurs auf Master RxJs 6 ohne Brechen A Sweat. In diesem Abschnitt werden wir einen Blick auf verschiedene Szenarien werfen in denen Sie AJAX verwenden und wie Sie es anwenden möchten. Ein paar der verschiedenen Szenarien, die wir uns ansehen werden, ist die Behandlung von Fehlern, inkrementelle Suche mit AJAX-Anfragen, wo wir Duplizierung von Anfragen und Dateiverschiebung zu vielen verhindern möchten, periodisch eine AJAX-API abfragen und Anzeigen von Ergebnissen, Erstellen einer bank-ähnlichen Anwendung oder Verwendung eines Redux-ähnlichen Datenspeichers. Es könnte sehr unterschiedliche Szenarien geben, an denen Sie interessiert sind, und einige von ihnen habe ich vielleicht nicht behandelt. Wenn du mich Bescheid sagst. Schicken Sie mir einfach eine Nachricht. Hinterlassen Sie ein Feedback im Q&A-Forum. Dann könnte ich einfach diese Szenarien hinzufügen. Wenn es eine interessante Sache für andere Benutzer ist und ich Zeit habe, werde ich es sicherlich hinzufügen. Sagen Sie mir einfach, woran Sie interessiert sind. sehen uns im nächsten Video, wenn wir mit dem ersten Szenario beginnen. 31. Fehler nicht fertigzustellen, die: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs zum Mastering RxJs 6 ohne Brechen A Sweat. In diesem Video werden wir einen Blick darauf werfen, wie wir Fehler erfassen können , die verhindern, dass die beobachtbaren Streams abgeschlossen werden. Standardmäßig, wenn ein Fehler von beobachtbaren Stream auftritt, wird es diesen Fehler ausgeben und in der Nähe der Zeichenfolge. Mit dem catch-Operator können wir diese Fehler tatsächlich abfangen und den Stream durch einen neuen Stream ersetzen. Aber Ihr ursprünglicher Stream wird immer noch geschlossen. Nichts, was du dagegen tun kannst. Durch die Kombination mehrerer Streams können wir tatsächlich davon erholen, indem wir einen sekundären Stream schließen und den ursprünglichen Stream aufrechterhalten. Werfen wir einen Blick auf einen Code. Hier behandle ich das Click-Ereignis von einer Schaltfläche, normalerweise vom Event-Handler, und ich verwende den Merge-Kartenoperator, um in einem neuen Stream zusammenzuführen , der einen Fehler schrieb und meldete, dass etwas Schlimmes passiert ist. Wenn ich auf Start klicke, können wir den Fehler sehen oder etwas Schlimmes passiert und wenn ich dann lösche und versuche, erneut zu starten, passiert nichts. Der ursprüngliche beobachtbare Stream vom Ereignis wurde geschlossen. Lassen Sie uns den Catch-Fehler einführen. Der Ort, an dem wir das hinzufügen, ist wichtig. Wenn ich dies der Pipe vom ursprünglichen Klick-Stream hinzufüge, wird es den Fehler abfangen, aber es wird immer noch diesen Stream schließen. Mit dem catch-Fehler geben wir eine neue Zeichenfolge zurück. In diesem Fall werde ich die Zeichenfolge mit einem einzelnen Ereignis zurückgeben. Wir sehen, dass der beobachtbare Stream nicht mehr Fehler hat, aber abgeschlossen ist. Wenn ich es lösche und wieder anfange, passiert nichts, weil es noch abgeschlossen ist. In diesem Fall möchten wir den Fehler auf dem Stream abfangen , in dem er aufgetreten ist, und nicht auf dem Mainstream. Auf dem Stream, der den Fehler erzeugt. Wenn ich nun auf Start klicke, sehen wir die Nachricht vom catch-Operator, aber wir sehen nicht, dass der ursprüngliche Stream geschlossen wird und wenn ich es lösche, können wir wieder auf Start drücken und wir werden eine neue Nachricht vom catch-Operator sehen , so dass die Original-Saite blieb offen. Beachten Sie, dass jeder Fehler den Stream vervollständigt, den sie mit catch-Fehler aufgetreten sind Sie können den Fehler abfangen, aber er wird immer noch zum Stream geschlossen. Kombinieren Sie mehrere Streams mit Merge Map oder Switch Map oder einem dieser Operatoren, um den ursprünglichen Stream offen zu halten und weiterhin Fehler zu behandeln. Wir sehen uns im nächsten Video. 32. Errors: Primäraktie. Willkommen zurück zum Diskurs mit Mustering RGs sechs, ohne Schweiß zu brechen. Also in diesem Video, werden wir einen Blick auf die Wiederholung von Aktionen werfen, die verderben produziert. So können einige Aktionen Fehler verursachen, die durch einen einfachen Wiederholungsversuch behoben werden können. Nein zur Blutung. Ajax-Anfragen. Wenn ich eine HTTP-Anfrage mache, das Abrufen von Daten vom Sheriff für diesen Server möglicherweise vorübergehend nicht verfügbar oder meine Internetverbindung ist fehlgeschlagen. Ich könnte auf dem mobilen Gerät sein, um Crew-Tunnel zu gehen oder so etwas. So gibt es, für Betreiber können wir verwenden, um zu versuchen, war es, zu wiederholen, was dies sofort für eine Reihe von Tonnen tut. Und das Rätsel. Versuchen Sie Win Operator , der eine verschachtelte, beobachtbare Zeichenfolge nimmt und es erneut versucht, wenn dieser nationale beobachtbare Strom abgeschlossen ist. Also fremde Ajax-Anfragen tun sofortigen Wiederholungsversuch. Es ist typischerweise neu, nicht die beste Idee, weil es nicht innehalten wird. Es wird mehrere Anfragen sehr schnell an den Server senden. Und wenn der Server ausfällt, weil er ausgelastet ist, hilft das ziemlich unwahrscheinlich. Also wiederholen, wenn mit einer leichten Kraft, ist in der Regel ein besserer Ansatz. Also werfen wir einen Blick auf einen Mantel. Haben Sie eine gute Zeit Mantel, wenn wir klicken Ich mache eine Ajax sagte Agitation zu einem A P Ich bitte. Das gibt es eigentlich nicht, zu meinem Server zu gehen und für etwas anzubieten, das nicht existiert. Das wird sich also mit einer 40 für Nord-Fonds anfühlen, noch keine Luftabfertigung. Wenn ich also auf den Start-Button klicke, sehen wir, dass die Anfrage auftritt und scheitert mit den 404 Nord-Fonds. Wenn ich erneut klicke, werden keine anderen Anfragen wie der beobachtbare Tod erledigt. Also lassen Sie uns importieren, um Operator und Sie das vor allem zu wiederholen, genau wie Fehler zu fangen. Der Ort, an dem Sie wieder versuchen, in der Kette ist wichtig. Wenn ich es nach der Schalterkarte wiederholen musste und ich auf Start klicke, ist das einzige, was passieren wird, dass wir versuchen, die Karte zu wechseln, die eigentlich nichts für Nützliches tut. Wenn ich mehrere Male klicke, können wir schließlich sehen, dass zu beantragen fühlt sich so in diesem Fall, wir wollen tatsächlich versuchen, Jason zu bekommen. Also müssen wir dort die Pipe-Funktion hinzufügen und es erneut versuchen, damit das Gadge Asian erneut versucht wird . Wenn ich nun auf Start klicke, sehen Sie vier Anfragen in schneller Folge, eine erste Anfrage und drei Wiederholungen. Aber wie ich schon sagte, ist dies schwierig nicht der beste Ansatz bei Ajax-Anfragen. So lassen Sie es verwendet, um zu versuchen, Winrow Chef wiederholen, die Airshow schwächen sehr unser Verhalten, abhängig von dem Fehler. In diesem Fall werde ich nur Interpol verwenden und einmal pro Sekunde emittieren. Das bedeutet, dass die get Station einmal pro Sekunde erneut versucht wird. Wenn ich also auf Start klicke, sehen wir mehrere Anfragen. Grundsätzlich fordern Sie alle Sekunden an, und es geht einfach weiter. Es ist nie Leute. Das liegt daran, dass das Intervall davon abhält. Also, wenn wir wollen, um die Zahl aus zu beschränken wiederholen. Wir haben Cooperator genommen und wir nehmen nur die ersten 3 Ereignisse, so dass wir eine erste Anfrage und dann drei Return Try Anfragen mit Sekunden dazwischen machen. Es gibt vier Anfragen. Nein, wenn ich erneut auf „Start“ klicke. Es fühlte die beobachtbare Zeichenfolge nicht, also fängt es wieder an, Anfragen zu machen. Also, was? Bestimmte Fehler Wiederholen ist eine sehr nützliche Strategie, insbesondere Ajax. Anforderung verwenden, um es erneut zu versuchen, wenn der Operator in der Regel der bessere Ansatz ist. So sehen wir uns im nächsten Video 33. Incremental Suche: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs, Mastering RxJs 6, ohne Schweiß zu brechen. In diesem Video werden wir einen Blick auf eine inkrementelle Suche werfen, indem wir in ein Textfeld eingeben und dann einige Daten auf einem AJAX-Server filtern. Wir beginnen mit einem DOM-Ereignis, wir werden das in den Wert, an dem wir interessiert sind, zuordnen. Wir werden eine AJAX-Anfrage machen und es wird das Ergebnis anzeigen und wir werden einige nette Features hinzufügen, wie das Einschränken der Anzahl der Anfragen, das Ausfiltern von Fehlern und ungültigen Anfragen usw. Alle Dinge, die relativ einfach mit RxJs zu tun sind. Werfen wir einen Blick auf einen Code. Hier habe ich die Oberfläche, die wir verwenden werden, es ist eine GitHub-API, mit der wir Benutzer basierend auf ihrem Benutzernamen abrufen können. Hier ist das Beispiel, wenn ich nach Torvalds suche. Hier ist, was wir beginnen werden, wir haben eine Sucheingabe und jedes Mal, wenn wir tippen, sehen wir die Ereignisse, die auf der Konsole gedruckt werden. Wir verwenden die Formularereignisse und tippen, um das zu erreichen. Wir sind nicht an der ganzen Veranstaltung interessiert, nur der tatsächliche Name. Das erste, was wir tun werden, ist den Kartenoperator zu verwenden, um den tatsächlichen Wert aus dem Ereignis zu extrahieren und dort sehen wir die Werte, die ausgedruckt werden. Derzeit erhalten wir eine Ausgabe für jede vorgenommene Änderung, alle Zeichentypen und wenn wir jeden Zeichentyp in eine Ajax-Anfrage verwandeln , würden wir die GitHub-API ziemlich stark verwenden und alle Zwischenergebnisse sind wird sowieso nicht angezeigt werden. Lassen Sie uns die Debug-Zeitfunktion verwenden, um zu verhindern, dass eine Ajax-Anfrage gestellt wird, bis der Benutzer für eine Sekunde pausiert hat. Nun, wenn ich meinen Namen eintippe, sehen Sie die Ausgaben erst, nachdem ich für eine Sekunde pausiert habe. Wenn ich die Ausgabe lösche und den Typ Torvald, wir sehen Torvald und dann nach einer Pause und dann, wenn ich DS tippe, sehen wir die volle Torvalds aber immer noch nach einer Pause. Lassen Sie uns das in eine Ajax-Anfrage verwandeln. Wir verwenden einen Switch-Map-Operator, um den Benutzernamen in eine Suchanfrage auf der GitHub API zu verwandeln . Wenn ich nun die Registerkarte Netzwerk öffne und ich meinen Namen in das Eingabefeld eingebe, sehe ich Ihre Anfragen an GitHub für meinen Benutzer und wenn ich es in Torvalds ändere, sehen wir eine weitere Anfrage. Großartig, so dass die Antwort, die wir zurück bekommen, eine Items Eigenschaft hat und wir sind nur an den Artikeln interessiert, also lasst uns das zuordnen und den Rest der Antwort verwerfen. Jetzt sehen wir nur ein Array von Elementen, aber wir wollen die Benutzer nacheinander verarbeiten, um einige UI anzuzeigen. Lassen Sie uns die Zusammenführungskarte verwenden, die eine Sammlung eines Arrays von Benutzern in einzelne Ereignisse von Benutzern verwandelt. Wenn ich meinen Namen eintippe, sehen wir eine Liste der Benutzer, die ausgegeben werden. Es ist eigentlich ungewöhnlich zu programmieren und zu abonnieren, also erhalten wir eine nette Benutzeroberfläche. Wir erhalten die Bootstrap-Karte für jeden Benutzer, der zurückgegeben wird. Wenn ich meinen Namen tippe, sehen wir mich auf dem zweiten Punkt und andere. Nun, wenn ich Torvalds tippe, wird die Anfrage gestellt, aber sie wird im Grunde zur Liste hinzugefügt, wir wollen ein wenig Nebenwirkungen. Bevor wir suchen, wollen wir tatsächlich die Ergebnisse löschen, wir werden den Tiefenoperator verwenden, um den inneren HTML des Ergebnisses div auf leer zu setzen, so dass das vorherige Ergebnis gelöscht wird. Nun, wenn ich meinen Namen tippe, sehen wir mich und andere Benutzer mit ähnlichen Namen, aber wenn ich Torvalds tippe, bekommen wir tatsächlich Linus Torvalds und andere Leute mit einem ähnlichen Namen zu sehen. Ein anderes Problem ist, wenn ich einige Änderungen vornehme, aber nach einer Sekunde mit dem gleichen Wert lande, also entferne ich das S und füge es wieder hinzu. Wir haben tatsächlich eine zweite Anfrage erstellt, die genau identisch mit der vorherigen Anfrage ist Mit dem eindeutigen bis zum Änderungsoperator können wir verhindern, dass der gleiche Wert in der Folge nicht ausgibt. Wenn ich nach Torvalds suche, sehen wir Linus, aber wenn ich das S entferne und es wieder hinzufüge, machen wir keine weitere Anfrage. Nur bis ich den Wert, nach dem wir gesucht haben, tatsächlich ändere und lange genug anhalten, um Anfragen auszulösen, dass wir eine Anfrage stellen. Wenn ich einen Wert entfernt habe, sehen wir, dass es tatsächlich einen Fehler aus der Ajax-Anfrage gibt. Nun, wenn ich tippe, passiert nichts, wir haben das Observable getötet, wir müssen wieder etwas Fehlerbehandlung hinzufügen. Holen Sie sich nur JSON, ich verwende den Pipe-Operator und den Catch-Fehleroperator, um dies in eine andere Dehnung zu verwandeln , und in diesem Fall verwende ich einfach eine leere Zeichenfolge, weil es nichts zu sehen gibt. Dies fängt den Fehler im Ajax-Stream ab und hält den Mainstream intakt. Wenn ich Linus suche, werde ich ihn finden Wenn ich es leere, wird eine Anfrage gestellt, aber ein Fehler wird zurückgegeben. Wenn ich meinen Namen eintippe, war das Observable immer noch in Ordnung, wir konnten immer noch suchen. Trotzdem ist es besser, diesen Fehler zu verhindern. Der Fehler ist tatsächlich das Ergebnis der Suche mit einem leeren Benutzernamen. Verwenden wir also den Filteroperator, um zu verhindern, dass nach leeren Benutzernamen gesucht wird. Wir werden den Doppelnotenoperator verwenden, um sicherzustellen, dass der Benutzer nicht leer ist. Die Suche nach meinem Namen, wir erhalten die Ergebnisse, leere Dinge aus, der Bildschirm ist leer, aber wir machen keine Ajax-Anfrage. Ziemlich cool. Eine inkrementelle Suche mit RxJs ist ziemlich einfach. Wir benutzten Handvoll Operatoren, aber sie alle spielten wirklich gut zusammen und verwalteten den ganzen Zustand für uns viel einfacher als dies mit zwingendem Code zu tun. Ich liebe es wirklich, RxJs in Fällen wie diesem zu verwenden. Wir sehen uns im nächsten Video. 34. Ajax anfragen: Hey, Maurice hier. Willkommen zurück zu diesem Kurs mit Master RxJS6 ohne Brechen A Sweat. In diesem Video werden wir schnell einen Blick auf die Erstellung von Polling-Ajax-Anfragen werfen. Wir werden Ajax-Anfragen tun und wir werden die Anfragen in einem zeitbasierten Intervall wiederholen , um dem Benutzer die neuesten Daten anzuzeigen. Aber wir werden mit einem Timer-Ereignis beginnen, und genau wie im vorherigen Video werden wir eine Ajax-Anfrage machen und die Ergebnisse anzeigen. Werfen wir einen Blick auf den Code. Dies ist, was wir werden es ein Datensatz verwenden, Chuck Norris Datenbank. Es hat eine RESTful API, wo wir die Reihe von zufälligen Chuck Norris Witzen bekommen können. Im vorherigen Video haben wir von Ereignissen verwendet, um zu starten, um zu beantragen. Jetzt denken Sie vielleicht, dass wir mit dem Intervall beginnen, aber wenn wir das Intervall verwenden, werden Sie sehen, dass wir tatsächlich warten müssen. Ich habe fünf Sekunden angegeben und es dauert tatsächlich fünf Sekunden, bis die erste Anfrage abgeschlossen ist. Ein besserer Weg ist mit dem Timer zu starten, mit dem Timer könnten Sie die anfängliche Wartezeit 0 Millisekunden angeben und dann optional, wie oft es wiederholt werden soll, also verwende ich hier fünf Sekunden für das Wiederholungsintervall. Sobald die Seite geladen wird, löst sie eine Ajax-Anforderung aus, die die ersten zehn Witze bekommt und dann alle fünf Sekunden wiederholt sie das, so ziemlich nett. Erstellen von Polling-Ajax-Anfrage ist ziemlich einfach, Ziemlich ähnlich wie bei Klick-Ereignis oder etwas Ähnliches. Wir verwenden so ziemlich die gleichen Operatoren wie das letzte Video, das Ajax, CatchError, die EMPER, MergeMap, SwitchMap, tippen und in diesem Fall haben wir die Dinge mit dem Timer gestartet. Wir sehen uns im nächsten Video. 35. Auf Leinwand zeichnen: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs auf Master RxJs 6 ohne Brechen A Sweat. In diesem Video werden wir einen Blick auf das Zeichnen auf der Leinwand werfen. Wir haben bereits einige auf der Leinwand gezeichnet, aber jetzt werden wir es etwas expliziter machen. Wir beginnen mit dem Zeichnen, wenn wir die Maus nach unten drücken. Wir zeichnen weiter, solange die Maus unten ist, und wir bewegen uns zur Maus. Aber mit der Maus oben, oder wenn wir die Leinwand verlassen, hören wir auf zu zeichnen. Werfen wir einen Blick auf den Code. Nur zur Erinnerung, hier ist die Leinwand, die wir vorher hatten. Wenn ich die Maus darüber bewege, zeichnen wir. Dies war der ursprüngliche Code, und wir begannen im Grunde mit der Maus bewegen Ereignisse, und wir begannen zu zeichnen. Jetzt wollen wir etwas expliziter sein. Wir warten auf unsere Maus-Down-Ereignisse, und nur mit der Maus beginnen wir zu zeichnen. Fügen Sie einen weiteren beobachtbaren Stream für das Maus-Down-Ereignis hinzu, und wir werden das tatsächlich abonnieren. Wir werden einen Schalter Kartenoperator verwenden, um von der Maus nach unten auf die Maus bewegen beobachtbaren Strom zu wechseln, wenn die Maus fertig ist. Wenn ich die Maus bewege, passiert nichts, aber sobald ich mit der Maus runter gehe, beginne ich eigentlich mit dem Zeichnen. Außer wenn ich die Maus loslasse, ist es immer noch auf dem Zeichnen. Wir müssen immer noch aufhören zu zeichnen. Wir werden einen dritten beobachtbaren Stream für die Maus nach oben Ereignisse hinzufügen. Wir werden bis Operator importieren, und wir werden Mausbewegungen Ereignisse nehmen, bis wir eine Maus bis Ereignisse erhalten. Stellen Sie nun sicher, dass Sie take hinzufügen, bis in der Maus Ereignisse Stream sonst bewegen, werden wir den gesamten Ereignisstrom stoppen. Wir wollen nur die Mausbewegung stoppen und immer noch Maus-Downs hören, um neue Draw-Ereignisse zu starten. Jetzt kann ich zeichnen, ich kann aufhören zu zeichnen, und alles sieht gut aus. Das ist, bis meine Maus die Leinwand verlässt. Selbst wenn ich die Maustaste außerhalb der Leinwand loslasse, zeichnet sie immer noch weiter. Wenn ich die Leinwand verlasse, müssen wir auch die Zeichnung sprechen. Ich erstelle ein Observable für die Maus heraus. Fügen Sie Stopp mit dem Take bis Operator hinzu. Nun hört das Zeichnen auf, wenn meine Maus die Leinwand verlässt. Ziemlich süß. Zeichnen ist ziemlich einfach. Wir haben bereits den grundlegenden Zeichnungscode. Durch die Verwendung der Schalterkarte und des Take bis Operator haben wir es expliziter gemacht. Beginnen Sie nur mit dem Zeichnen, wenn die Maus heruntergefahren ist, und stoppen Sie das Zeichnen, wenn die Maus nach oben geht, oder wir verlassen die Leinwand. Wir sehen uns das nächste Video. 36. Malen: Hallo Maurice hier, willkommen zurück zu diesem Kurs auf Mastering RxJ6 ohne Schweiß zu brechen. In diesem Video werden wir mit dem Canvas fortfahren und wir werden die Zeichnung erweitern, um einige weitere Malfunktionen enthalten. Wir starten mit dem Zeichnungsbeispiel aus dem letzten Video, und wir fügen Observables hinzu, um die Farbe und die Liniengröße unserer Zeichnung anzugeben. Früher haben wir die WithLatestFrom-Operatoren kombiniert , um diese in den beobachtbaren Stream einzufügen. Werfen wir einen Blick auf den Code. Das ist also im Grunde unser vorheriges Beispiel, in dem wir auf der Leinwand zeichnen können. Aber ich habe die Farb- und Zeileneingaben enthalten. Aber im Moment tun sie noch gar nichts. Also lasst uns mit der Farbe beginnen. Ich habe einen Verweis auf die Eingabe namens Strichstil. So erstellen wir einen neuen Strich-Style-Stream mit FromEvent und wir hören uns das InputEvent an. Also verwende ich dort die Standard-HTML5-Farbeingabesteuerung. Wir sind also nur an der Wertanzeige interessiert, die alle den Kartenoperator verwenden , um den Wert von der Eingabe zu erhalten. Genau wie wir es schon ein Dutzend Mal gemacht haben. Jetzt möchte ich das in den Strom spritzen, den wir zum Malen gehört haben. So bequemer Operator, der dort zu verwenden ist withLatestFrom, wo ich verschiedene Eingabe-Strings in einem Stream kombinieren kann. Also werde ich sie kombinieren. MouseDown-Stream, der ein StrokeStyle-Stream, und der zweite Parameter ist die Funktion, um die verschiedenen Werte zu kombinieren, nicht an einem MouseDown-Ereignis interessiert, also werden wir das ignorieren, und wird zu Strich-Stil nehmen und , dass in ein Optionsobjekt, das Strichstil zu einem späteren Zeitpunkt mehr hinzufügen muss. Sie ist jetzt in der Schalterkarte, wir bekommen das Optionsobjekt mit unserem Strichstil. Also füge ich das erstellte 2D-Objekt hinzu, was bedeutet, dass es genauso ist, Objekte zu bilden. Also werde ich die Optionen von dort im Abonnieren greifen und den Kontext-Strichstil festlegen, den Strichstil tun, den wir angegeben haben. Also, wenn ich jetzt die Farbe wähle, zum Beispiel rot, kann ich eine rote Linie zeichnen. Das einzige Problem, wenn ich die Seite aktualisiere und ich beginne zu zeichnen, passiert nichts, weil wir noch keine Anfangsfarbe haben. Also müssen wir den Strich-Stil Stream ein bisschen intelligenter machen. Sie müssen angeben, dass es mit dem Anfangswert der Eingabe beginnt. Also geben wir einfach den Anfangswert dort an, und jetzt beginnt er mit dem Wert, so dass wir sofort zeichnen können. Wir können eine schwarze Linie zeichnen, und jetzt kann ich sie zu blau ändern und wir können eine hellblaue Linie oder mehr lila zeichnen. Süß. Lassen Sie uns dasselbe mit der LineWidth tun. Der Ansatz ist der gleiche, also kopiere ich einfach diese Strichstilzeichenfolge und ändere die Variablen, um eine LineWidth zu verwenden. Hinweis withLatestFrom Operator ist wirklich praktisch. Wir können so viele Eingabestreams verwenden, wie wir wollen. Also fügen wir den LineWidth-Stream hinzu und fügen ihn den Optionsobjekten hinzu. Jetzt in unserem Abonnieren kann ich einfach die LineWidth auf den Kontext setzen, einfach. Jetzt können wir einfach anfangen zu malen. Aber wenn ich die Zeilengröße etwas größer mache, bekommen wir eine dickere Linie. Wenn ich die Farbe auf Rot änderte, bekommen wir die fette rote Linie, Nice. Also [unhörbar] wir sind Experten. Ich mag es nicht, diese Eingabezeichenfolge zu duplizieren. Aber lassen Sie uns eine kleine Hilfsfunktion erstellen, Eingabezeichenfolge erhalten und wir werden DOM-Elemente übergeben und es wird einen Strom seiner Werte zurückgeben, die an Elemente verwendet werden, die übergeben werden, und jetzt ist der Strich-Style-Stream das Ergebnis des Aufrufs von get input -Zeichenfolge. Wir werden dasselbe für den LineWidth-Stream tun, und alles funktioniert immer noch. Nette kleine Helferfunktion. Das Hinzufügen von farbähnlichen Funktionen ist also ziemlich einfach. Wir fügen nur Eingaben hinzu, um die Eigenschaft zu nehmen, die wir wollen, und wir werden verwenden, um StartWith und die WithLatestFrom den Wert zu greifen und sie in den Stream einzubetten, den wir verwendet haben, um zu malen, süß. So sehen wir uns im nächsten Video. 37. Subscriptions teilen: Hi, ich bin [unhörbar]. Willkommen zurück zu diesem Kurs auf Master RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werden wir einen kurzen Blick auf die Freigabe-Abonnements werfen. Manchmal müssen Sie ein Abonnement freigeben, da in den meisten Fällen jedes Mal, wenn Sie ein Observable abonnieren, ein neues Observable erstellt und den gesamten Code im Observable erneut ausgeführt wird. Nun, das ist nicht immer der Fall, aber in den meisten Fällen ist es das. Der Freigabe-Operator lässt Sie tatsächlich den gesamten Code in einem beobachtbaren teilen. Es wird also nur einmal für jedes Abonnement ausgeführt. Das macht es schneller. Werfen wir einen Blick auf einen Code für ein Beispiel. Hier habe ich wieder unser Abrufbeispiel, wo wir nach Benutzernamen auf GitHub gesucht haben und ich Torvalds eingegeben habe. Wir sehen eine Liste der Benutzer erscheinen und eine einzelne Ajax-Anfrage ausgeführt wird. Ein Teil der Anforderung ist die Anzahl der zurückgegebenen Benutzer, die Gesamtzahl. Also, wenn ich das in die Ergebniszählungen einschließe, sehen wir jetzt, dass es tatsächlich zwei Ajax Rsequests gemacht wurden. Das liegt daran, dass der Ereignisstrom zweimal abonniert wurde. Also wird alles dort zweimal ausgeführt, einschließlich des Ajax-Codes. Jetzt ist das irgendwie verschwenderisch, also lasst uns einen einzigen Ajax-Code machen, um beide Ergebnisse aus diesem einen Code zu erhalten. Wir importieren den Freigabe-Operator, und wir fügen den Freigabe-Operator der Pipe hinzu. Denken Sie daran, dass Sie dies an den Punkten hinzufügen, an denen alles vor, was Sie zwischen allen Abonnements teilen möchten. Also füge ich es in diesem Fall nach dem Ajax-Code hinzu. Wenn ich nun nach Torvalds suche, erhalten wir die Gesamtzahl der Benutzer 126 und die Liste der Benutzer mit einer einzigen Anfrage. Wenn ich wieder nach meinem Namen suche, eine einzelne Anfrage für die Gesamtzahl, und die Benutzer selbst, viel besser. Manchmal ist es am besten, Observables zu teilen, wenn Sie mehrere Abonnements durchführen. Es ist nicht immer notwendig, aber ziemlich oft ist es. In diesem Fall war es sehr klar, dass die Ajax-Anfrage mehrmals ausgeführt wurde. Es ist nicht immer so klar. Grundsätzlich ist der zu verwendende Operator share. Es gibt eine Beziehung zum Operator SharePlay , der ein bisschen fortgeschrittener ist und sich tatsächlich Werte merken und sie erneut ausgeben wird , wenn neue Abonnements gemacht werden. Wir werden das in einem anderen Video verwenden. Wir sehen uns im nächsten Video. 38. Redux wie Store: Hallo, Maurice hier. Willkommen zurück zur Partitur von Master RxJs 6 ohne Breaking A Sweat. In diesem Video werden wir einen Blick auf die Erstellung eines einfachen Redux-ähnlichen Datenspeichers werfen. Redux ist ein vorhersehbarer Zustandscontainer für JavaScript. Sehr beliebt, vor allem in der React-Welt und ist sehr fähig und erweiterbar. Wir werden es nicht so weit fortgeschritten machen. Wir werden eine sehr einfache Implementierung in RxJs machen, weil es eigentlich ziemlich einfach ist. Werfen wir einen Blick auf den Code. Dies ist die eigentliche Redux-Site, also der vorhersehbare Zustandscontainer für JavaScript. Sie werden mehr darüber erfahren, ich empfehle Ihnen, diese Seiten zu besuchen. Für einen Starter habe ich eine kleine App mit einem Inkrement und einem Dekrement-Button und einem Add 10. Hier sehen Sie den Code, die Ereignishandler für Inkremente und Dekremente. Sie sehen, dass wir einen Reducer und eine CreateStore-Funktion importieren, und wir nennen den CreateStore möglicherweise im Reducer. Dann abonnieren wir den Store und wir zeigen tatsächlich die aktuellen Zustände als formatierte JSON-Zeichenfolge an. Wir abonnieren auch die verschiedenen Buttons und Versandaktionen. Sie können die Aktionen sehen, die sie im Grunde Objekte mit einem Typ sind , der die Art der Aktion angibt, und in einigen Fällen, wie im Add 5, hat es eine Nutzlast, die zusätzliche Daten enthält. In einem typischen Redux-Szenario werden diese Aktionen mit Hilfsfunktionen erstellt, aber um dieses Beispiel einfach zu halten, habe ich das nicht getan. Aber es macht es zuverlässiger und testbarer, daher empfehlen Sie dringend, dass Sie dies tun. Reducer ist wirklich einfach. Es hört im Grunde auf Aktionen und gibt einen neuen Zustand zurück, wenn die Aktion den Status ändert. Eines der Kernprinzipien sind unveränderliche Daten. Sie ändern nie den Status, Sie erstellen immer ein neues Zustandsobjekt. Das mache ich in den Inkrement- und Dekrementfunktionen. Ich erstelle im Grunde eine Kopie des Zustandsobjekts, setze die Anzahl, in diesem Fall ist nichts mehr darin, so ziemlich einfach. Aber wenn mehr Daten darin waren, wird es beibehalten und JSTOR-Konto würde aktualisiert werden. Die switch-Anweisung wie diese ist nicht sehr funktional, aber es ist die Art und Weise, wie Redux-Code ziemlich oft geschrieben wird. Ich werde Ihnen zeigen, wie Sie dies in einem Moment funktioneller machen können, aber im Moment werden wir dies als eine einfache switch-Anweisung belassen. Eine weitere Sache ist hier zu beachten, dass das erste Mal, wenn dies aufgerufen wird, die Zustände undefiniert sind und der Anfangszustand als aktueller Zustand festgelegt wird. Dort wird diese Anfangszustandsvariable verwendet. Die Signatur für eine Reduce-Funktion ist sehr einfach und immer gleich. Es gibt im Grunde einen neuen Zustand zurück, der das Ergebnis der Anwendung einer Aktion auf den alten Zustand ist. neue Zustand ist also alter Zustand plus Aktion. Einfach. Der CreateStore ist ziemlich leer. Es gibt eine CreateStore-Funktion, die wir exportieren, aber es gibt noch nichts. In diesem Fall wollen wir steuern, wie Ereignisse emittiert werden so dass das Subjekt eine gute Möglichkeit ist, neue beobachtbare erstellen. Wir erstellen also einen Aktionsstrom, weil es sich im Grunde um einen Strom von Aktionen handelt, der das Ergebnis eines Subjekts ist. Dann ist der Laden tatsächlich das Ergebnis der Arbeit mit dem aktuellen Zustand und den Aktionen. Wir haben einen Scan-Operator verwendet, um tatsächlich den aktuellen Zustand zu berechnen. Mit dem Scan haben wir eine Reduzierfunktion übergeben und wir setzen ihren Anfangswert auf undefiniert. Auf diese Weise wird der Reduzierer mit undefined als erster Zustand aufgerufen, was dazu führt, dass der Anfangszustand im Reduzierer gesetzt wird. Auf diese Weise liegt die gesamte Verantwortung dafür, was der tatsächliche Zustand ist und wie aktualisiert wird, innerhalb des Reduzierers und nicht im generischeren CreateStore. Also kehren wir zurück, um zu speichern. Wir müssen in der Lage sein, Aktionen zu versenden, also lassen Sie uns eine Dispatch-Funktion zum Store hinzufügen. Alles, was es tut, ist im Grunde diese Aktionen in den Stream ausgibt. Wenn ich nun auf „Inkrement“ oder „Dekrement“ klicke, können wir die Statusänderung sehen. Das Einzige ist, dass es noch keinen Anfangszustand gab. Lassen Sie uns also beginnen, indem Sie ein Ereignis ausgeben, um den Zustand zu initialisieren. Wir verwenden den StartWith-Operator und bevor der Scan tatsächlich ein Ereignis aussendet. Wir nennen es mit Typ Unterstrich Unterstrich, darin Unterstrich Unterstrich. Name spielt keine Rolle, solange er einzigartig ist und nur dazu gedacht ist, den Zustand zu initialisieren. So sehen Sie jetzt die Zählung beginnen mit Null. Eine weitere Sache, dies ist der anwendungsweite Zustand, so dass es von allen Abonnements geteilt werden sollte. Wir nutzen das SharePlay. Notice Share-Operator schützt das SharePlay, so dass neue Abonnements tatsächlich die letzte Version des Status erhalten. Wir übergeben 1, weil wir uns nur an ein letztes Staatsereignis erinnern wollen, nicht an alle verschiedenen Zwischenereignisse. Es funktioniert immer noch. Großartig. Also lasst uns diesen Reduzierer ein bisschen besser machen. Weil switch-Anweisungen wie diese schön sind und das ist, was Sie in vielen Redux-Beispielen sehen. Aber wir werden es ein bisschen funktioneller machen, weil RxJs mehr über funktionale Programmierung geht. Wir werden ein Wörterbuch mit Handlern erstellen. Ich füge einen Handler für die Inkrementaktion hinzu. Dies nimmt nur den alten Zustand als Eingabe. Uns ist das Geschehen egal. Da nützt es nichts. Wir werden im Grunde den neuen Zustand von dort zurückgeben. Mach dasselbe mit dem Dekrement. Wir müssen diese in Klammern setzen, damit es dieses Objekt zurückgibt, andernfalls wird es als Codeblock betrachtet. Also lassen Sie uns das Dekrement einschließen. Jetzt müssen wir die Anweisung nicht mehr wechseln, aber wir können eine einfache Suche im Handler für ein Objekt durchführen , um den richtigen Handler für eine bestimmte Aktion zu finden. Sobald wir diesen Handler haben, können wir ihn mit den alten Zuständen und der Aktion ausführen , die den neuen Zustand zurückgibt. Nun könnte es Aktionen geben, die wir nicht wirklich behandeln, wie dieser Unterstrich Unterstrich in ihm unterstrichen Aktion. Lassen Sie uns also einen Standard-Handler hinzufügen, der nur den aktuellen Zustand zurückgibt. Der Handler ist derjenige für den angegebenen Typ oder der Standardhandler. Unser Verhalten ist immer noch das gleiche, aber der Code ist jetzt funktioneller. Fügen wir nun einen neuen Handler für die Add-Aktion hinzu. Wir erstellen einen Handler namens ADD. Es braucht einen Zustand. Außerdem wird die Aktion ausgeführt, da die Nutzlast in der Aktion angibt, wie viel dem aktuellen Status hinzugefügt werden soll. Anstelle von Plus 1 fügen wir die Aktion zur Nutzlast hinzu. Jetzt können wir noch inkrementieren und dekrementieren, aber wir können auch 5 hinzufügen. Nachbauen von Reduzierstücken auf diese Weise ist viel schöner. Wir bekommen sehr kleine testbare Funktionen. Diese Typen, die ich nicht exportiert habe, aber wir können diese Handler einfach exportieren und sie sehr testbar machen. Das Zustandsmanagement in einem Redux-ähnlichen Stil mit RxJs ist also sehr einfach. Wir haben einen neuen Stream mit dem Betreff erstellt. Wir haben im Grunde einen Scan-Operator verwendet, um den aktuellen Zustand basierend auf dem vorherigen Zustand und der Aktion zu berechnen . Wir haben StartWith-Operator verwendet, um den Zustand zu initialisieren, und wir haben das SharePlay verwendet, so dass neue Abonnements automatisch in den aktuellen Zustand gelangen und der Zustand zwischen allen Abonnements geteilt wird. Ziemlich süß. Also sehe ich dich im nächsten Video. 39. Redux Store: Hallo Maurice hier. Willkommen zurück zu diesem Kurs zur Beherrschung von RxJs 6, ohne ins Schwitzen zu brechen. In diesem Video werden wir den Redux Store ein wenig verbessern. Wir werden RxJs 6-Stil-Abonnements hinzufügen, so dass wir nicht nur zwingende Codes verwenden müssen, um Ereignisse zu versenden. Dies erweist sich als ziemlich einfach, weil das Thema, mit dem wir einen beobachtbaren Stream erstellt haben, auch die richtige Form ist, um als Teilnehmer zu agieren. Sie können diese Themen einfach über das Abonnement von Ereignis-Streams verschieben und die verschiedenen Streams auf diese Weise verketten. Werfen wir einen Blick auf den Code. Nur als Erinnerung hier haben wir den vorherigen Code. Ich habe einen Inkrementknopf bei fünf und inkrementieren. Wenn ich auf Inkrement klicke, sehen wir die Anzahl erhöht, und das gleiche mit den anderen Schaltflächen. Anstatt die Add-Ereignisliste zu verschmelzen, möchte ich dies in einem reaktiveren Stil tun. Wir verwenden die von Ereignissen, um einen beobachtbaren Stream von Klick-Ereignissen zu erstellen, und wir verwenden den Kartenoperator, um das Aktionsobjekt zu erstellen, das wir ausgelöst haben. Dann wollen wir nur abonnieren, um diesen Event-Stream zu speichern. Jetzt kann ich nicht einfach zum Speichern übergehen, das wird nicht funktionieren, weil der Laden nicht das eigentliche Thema ist. Wenn wir uns den Shop erstellen anschauen, sehen wir, dass der Laden nur ein Ergebnis von Piping Event Struger, Action-Stream und dem Action-Stream ist, das ist der, den wir tatsächlich abonnieren müssen. Wir können das auf diese Weise auf die Ladenbelichtung hinzufügen, dann können wir es im Abonnement verwenden. Wir werden mit Store-Stream-Punkt-Action-Stream abonnieren. Jetzt sehen wir, dass das Inkrement immer noch funktioniert. Natürlich, plus fünf und das Dekrement noch funktionieren. Sie haben sich noch nicht verändert. Lassen Sie uns sie auf die gleiche Weise aktualisieren. Lassen Sie uns den Code kopieren und die Aktionsobjekte und die Ereignishandler aktualisieren. Das ist die Dekrement getan. Das sind die Plus-Fünf erledigt. Ich werde sehen, wie alle Ereignishandler funktionieren. Schön. Die Verwendung eines reaktiveren Stils mit RxJs ist wirklich einfach, weil es alle beobachtbaren Streams sind, die wir einfach miteinander verketten können. Süß. Wir sehen uns das nächste Video. 40. Ende: Hallo, Maurice hier. Willkommen zurück zu diesem Kurs zum Mastering RxJs 6 ohne Schwitzen zu brechen. Herzlichen Glückwunsch, du hast es geschafft. Sie haben das Ende des Kurses erreicht. Hoffentlich haben Sie gesehen, dass RxJs eine großartige Bibliothek ist. Es ist ideal für asynchrone reaktive Programmierung. Verwenden Sie beobachtbare Streams, manipulieren Sie diese Streams mit Operatoren, Zusammenführen, Streams Filtern, Transformieren, et cetera. Viele Funktionen. Also, jetzt liegt es an dir. Gehen Sie weiter, bauen Sie etwas Großartiges mit RxJs und lassen Sie mich wissen, was es ist. Wenn es etwas öffentlich ist und ich sehen kann, sehe ich immer gerne, was Leute machen mit den Techniken, die ich ihnen lehre. Das ist also das Ende dieses Kurses, aber es gibt immer mehr zu lernen. Für alles, was Sie in diesem Kurs sehen möchten, für mehr Szenarien oder vielleicht Operatoren, die abgedeckt sehen wollen, lassen Sie mich wissen. Ich füge sie hinzu und werde Sie benachrichtigen, wenn es fertig ist. Wir lernen etwas anderes über reagiert, oder Angular, oder GET, oder irgendwas von diesen Dingen, ich bin Spiel. Also sag es mir einfach Bescheid und ich werfe es mir mal ansehen. So viel Glück. Alles Gute, und viel Spaß mit RxJs.