rxjs recipes:’ forkdołącz ’ z postępem realizacji dla masowych żądań sieciowych w Angular

jak to często mi się zdarza — ten post jest tylko przedłużeniem mojej aktywności StackOverflow: -).

pytanie:

czy istnieje sposób, aby zebrać listę obserwowalnych razem, aby uzyskać łączny wynik, jak forkJoin robi, ale uzyskać jakiś postęp podczas ich kończenia?

ładne zadanie do tworzenia niestandardowej funkcji RxJS. Zaimplementujmy to!

przyjrzyjmy się oficjalnej dokumentacji:

forkJoin(…sources: any): Observable<any>

akceptuje Array z ObservableInput lub słownik Object z ObservableInput i zwraca Observable, który emituje tablicę wartości w dokładnie takiej samej kolejności, w jakiej został przekazany tablica, czyli słownik wartości w tym samym kształcie co przekazany słownik.

innymi słowy, forkJoin for Observables działa tak samo jak Promise.wszystko działa na obietnice.

oto schemat marmuru:

możliwym przypadkiem użycia jest uruchomienie wielu równoległych żądań sieciowych — na przykład pobranie niektórych szczegółów listy użytkowników (jeśli API obsługuje tylko pobieranie przez użytkownika).

oto przykład:

snippet link

oto link kodowy do zabawy.
dziala ladnie, ale co jesli potrzebujemy wiedziec jakies informacje POSREDNIE, np. ile zadan juz zostalo rozwiazanych? Przy obecnej implementacji forkJoin jest to niemożliwe, ale możemy stworzyć własną wersję ?.
OK, tak krótki program jak powinien działać ten forkJoinWithPercent:
wyjście:
1. Zwraca wyższej klasy (HO) Observable (), która emituje tablicę dwóch Obserwabli:.

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

2. procent$ – emituje procent ukończenia (liczba);
3. finalResult$ — wyświetla końcową tablicę wartości na końcu (lub błąd, jeśli jakiś obserwowalny argument wyświetla wartość błędu).
wstępnie użycie wygląda tak:

szczegóły implementacji:

  1. nasza funkcja forkJointWithProgress akceptuje tablicę Obserwabli i powinna zwracać obserwable wyższego rzędu.
  2. to zwrócone Observable powinno emitować wartość (użyjemy do tego ())
  3. efekty uboczne zostaną dodane do każdego elementu w tablicy argumentów Observables do obliczenia procentu ukończenia i wyemitowania tej wartości specjalnym procentem$ (użyjemy operatora finalize do obliczenia procentu i użyjemy Subject jako procentu$).
  4. finalResult $ zapewnia standardowy wynik rxjs forkJoin.
  5. wynik obserwowalny powinien działać niezależnie dla każdego abonenta (funkcja wrap z funkcją rxjs defer, aby zapewnić czysty przebieg dla każdego abonenta-możesz przeczytać więcej o tym przypadku tutaj).
  6. jeĹ „li ktăłryĺ” z argumentăłw Observables wyĹ „wietla bĹ’ Ä … d — bÄ ™ dzie on propagowany do finalResult$ subscribers.

Packtpub.com I przygotowałem cały kurs RxJS z wieloma innymi szczegółami na temat tego, jak możesz rozwiązać codzienne zadania programistów za pomocą tej niesamowitej biblioteki. Może być interesujący dla początkujących, ale zawiera również zaawansowane tematy. Spójrz!

implementacja

#1-2 akceptujemy tablicę obserwowalnych i powinniśmy zwracać obserwowalne z wyższego rzędu .

Ok, tylko ślad naszej przyszłej funkcji:

snippet link

biorąc pod uwagę, że mamy arrayOfObservables (nasze obserwable ajax), więc powtórzmy i dodajmy żądaną logikę:

#3 Dodawanie efektów ubocznych do Obserwabli argumentów i obliczanie procentu.

oto co mamy:

snippet link

dodamy więcej funkcjonalności do obserwabli argumentów w tablicy. Iterujemy na tablicy i stosujemy Operator finalize dla każdego obserwowalnego.

operator finalize czeka na konkretne obserwowalne zakończenia, następnie oblicza procent ukończonych obserwowalnych i emituje wartość za pomocą procentu$Subject.

#4 zadzwoń do forkJoin, aby uzyskać ostateczną wartość wyniku

snipper link

ok, przejdźmy przez ten kod:
forkJoin pobiera tablicę obserwabli argumentów, subskrybuje je wszystkie i czeka aż będą kompletne.
gdy wynik jest gotowy – Operator tap wyświetla ostatnią wartość procentową (100%) i uzupełnia procent$ Subject (aby zapobiec wyciekom pamięci).
ostateczne wyniki będą wysyłane do subskrybentów.

5 Zawijanie całej tej funkcji w „defer”

funkcja rxjs defer zapewnia nową Obserwowalną instancję (wynik jej funkcji zwrotnej) dla każdego abonenta. Oznacza to, że każdy z naszych subskrybentów otrzyma czystą run (i counter = 0).

link do fragmentu

pozwala sprawdzić, jak to działa:

  1. otrzymujemy tablicę obserwabli (line1).
  2. zawiń wynik za pomocą RxJS, aby zapewnić czysty przebieg dla każdego abonenta (linia 3)
  3. Utwórz licznik, aby obliczyć procent ukończenia i utworzyć instancję procent$ Subject do emisji wartości procentowej (linie 5-6).
  4. tworzymy nową tablicę poprzez iterację nad oryginalną tablicą i dodanie nowej funkcjonalności z finalize-obliczanie wartości procentowej i emitowanie jej, jeśli niektóre z obserwabli się skończą. (linie 8-15)
  5. zadzwoń do RX forkJoin i zastosuj operator tap, aby móc wysłać procent 100, gdy forkJoin uzyska końcowy wynik. Przypisz wynik do zmiennej finalResult$(linie 17-22).
  6. zwróć obserwowalny wyższego rzędu, który będzie emitował .

do końca

oto jak to działa w kodzie:

forkJoinWithPercent

co z używaniem go w Angular?Link do tej sekcji

ta funkcja jest również publikowana jako pakiet npm — rxjs-toolbox, więc możesz jej używać w swoich projektach.

a oto Demo Stackblitz Angular, które wykorzystuje ten pakiet do podawania wartości procentowej do paska ładowania:

W kątowym

dodatkowy odczyt.

więcej o przypadkach użycia operatorów RxJS można przeczytać tutaj:

  1. „powtórz vs powtórz”
  2. „RxJS: zarządzanie stanem operatora” Nicholas Jamieson.
  3. „Operator powtarzania rxjs — przewodnik dla początkujących nekromantów”
  4. „powiadomienia o dławieniu od wielu użytkowników z RxJS”
  5. rxjs-toolkit — Rxjs codzienne niestandardowe operatory autorstwa Jasona Awbreya.
  6. backoff-rxjs — zbiór pomocnych operatorów RxJS do obsługi strategii backoff autorstwa Alexa Okrushko.

podoba Ci się ten artykuł? Bądźmy w kontakcie na Twitterze!

zaczynając od sekcji 4 mojego kursu wideo rxjs advances personel jest sprawdzany-więc jeśli już znasz RxJS-możesz znaleźć coś przydatnego dla siebie: obserwowalne wyższego rzędu, antypoślizgi, harmonogramy, testy jednostkowe itp! Spróbuj!

*Specjalne podziękowania dla Larsa Gyrupa Brinka Nielsena, Nicholasa Jamiesona, Tima Deschryvera i Michaela Karéna za recenzję tego postu i wiele cennych uwag, aby uczynić go lepszym!

dyskutuj ze społecznością

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.