-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into czy-wiesz-ze-nie-musisz-juz-klonowac-tabli…
…c-by-wykonac-na-nich-typowe-operacje
- Loading branch information
Showing
7 changed files
with
170 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
name: Piotr Tatarski | ||
title: Piotr Tatarski | ||
short_name: ptatarski | ||
image: ptatarski.webp | ||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
_posts/pl/2024-07-26-czy-wiesz-jak-obslugiwac-bledy-w-rxjs.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
--- | ||
layout: post | ||
title: Czy wiesz, jak obsługiwać błędy w rxjs? | ||
date: 2024-07-26T08:00:00+01:00 | ||
published: true | ||
didyouknow: false | ||
lang: pl | ||
author: ptatarski | ||
image: /assets/img/posts/2024-07-26-czy-wiesz-jak-obslugiwac-bledy-w-rxjs/thumbnail.webp | ||
tags: | ||
- rxjs | ||
- javascript | ||
--- | ||
|
||
Biblioteka rxjs dostarcza kilka mechanizmów, które ułatwiają reagowanie na nieprzewidziane sytuacje występujące podczas procesowania strumienia danych w aplikacji. | ||
|
||
## Operator catchError | ||
|
||
Jednym z najpopularniejszych jest operator `catchError`. Operator ten pozwala nam zareagować na sytuację, kiedy w strumieniu z jakiegoś powodu nagle wystąpi błąd. Zamiast brzydkiego błędu w konsoli możemy w `catchError` dostarczyć `Observable`, który będzie przetwarzany dalej w strumieniu. | ||
|
||
Ważne, aby `catchError` znajdował się po operacji, w której wystąpi błąd. Inaczej nie nie zostanie przechwycony. | ||
|
||
Przykładowy kod: | ||
```javascript | ||
of(1, 2, 3, 4, 5) | ||
.pipe( | ||
catchError(() => of(99)), // Ten catchError nie obsłuży błędu występującego niżej | ||
map((num) => { | ||
if (num === 4) { | ||
throw new Error('test'); | ||
} | ||
return num; | ||
}), | ||
catchError((error) => of(`Złapano błąd ${error}`)) | ||
) | ||
.subscribe({ | ||
next: console.log, | ||
error: (err) => console.log('error', err.message), | ||
complete: () => console.log('completed'), | ||
}); | ||
// 1 | ||
// 2 | ||
// 3 | ||
// Złapano błąd Error: test | ||
// completed | ||
``` | ||
Jak widać, błąd został złapany i nigdy nie wpadł w obsługę `error observera`. | ||
|
||
## Operator retry | ||
|
||
Kolejnym operatorem pozwalającym na obsługę błędów jest operator `retry`. Jak sama nazwa wskazuje, operator ten pozwala na ponowienie operacji. Jest to przydatne, jeżeli zakładamy, że operacja w strumieniu może się zakończyć niepowodzeniem z przyczyn niezależnych od użytkownika, np. niedostępności usługi. `retry` ponowi wtedy obsługę, zaczynając od początku strumienia. | ||
|
||
Retry nie tylko pozwala nam zdefiniować liczbę (`count`) ponownych wywołań, lecz także odstęp między nimi (`delay`). Parametr `delay` może przyjmować wartość w milisekundach między wywołaniami lub funkcję zwracającą strumień. | ||
- Jeżeli strumień w `delay` wyemituje wartość lub zakończy się bez emitowania wartości - `retry` ponowi operacje. | ||
- Jeżeli strumień w `delay` zakończy się błędem - `retry` przerwie ponawianie operacji. | ||
|
||
```javascript | ||
of(1, 2, 3, 4, 5) | ||
.pipe( | ||
map((num) => { | ||
if (num === 4) { | ||
throw new Error('testowy error'); | ||
} | ||
return num; | ||
}), | ||
retry({ | ||
count: 3, | ||
delay: (error, retryCount) => { | ||
console.log(`delay ${1000 * retryCount}`); | ||
return timer(1000 * retryCount); | ||
}, | ||
}) | ||
) | ||
.subscribe({ error: (err) => console.log('error', err.message) }); | ||
|
||
// delay 1000 | ||
// delay 2000 | ||
// delay 3000 | ||
// error testowy error | ||
``` | ||
W powyższym przykładzie nastąpiła trzykrotna próba ponowienia operacji, ale z każdą kolejną próbą odstęp między nimi jest zwiększany o sekundę. | ||
|
||
## Przydatne linki | ||
- Dokumentacja operatora `retry`: [https://rxjs.dev/api/index/function/retry](https://rxjs.dev/api/index/function/retry) | ||
- Dokumentacja operatora `catchError`: [https://rxjs.dev/api/index/function/catchError](https://rxjs.dev/api/index/function/catchError) | ||
- Wykonywalne kody z przykładów: [https://stackblitz.com/edit/rxjs-vmvukg?devtoolsheight=60&file=index.ts](https://stackblitz.com/edit/rxjs-vmvukg?devtoolsheight=60&file=index.ts), [https://stackblitz.com/edit/rxjs-mgmtg5?devtoolsheight=60&file=index.ts](https://stackblitz.com/edit/rxjs-mgmtg5?devtoolsheight=60&file=index.ts) |
74 changes: 74 additions & 0 deletions
74
_posts/pl/2024-09-09-czy-wiesz-czym-jest-i-jak-uzywac-object-groupby.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
--- | ||
layout: post | ||
title: Czy wiesz, czym jest i jak używać Object.groupBy()? | ||
description: "" | ||
date: 2024-08-09T08:00:00+01:00 | ||
published: true | ||
didyouknow: true | ||
lang: pl | ||
author: pgrobelny | ||
image: /assets/img/posts/2024-09-09-czy-wiesz-czym-jest-i-jak-uzywac-object-groupby/thumbnail.webp | ||
tags: | ||
- javascript | ||
--- | ||
|
||
`Object.groupBy()` to statyczna metoda pozwalająca grupować elementy. | ||
Jej składnia jest następująca: | ||
```javascript | ||
Object.groupBy(items, callbackFn) | ||
``` | ||
gdzie `items` jest listą, którą będziemy grupować, a `callbackFn` jest funkcją, którą będziemy wywoływać dla każdego elementu z listy. Funkcja ta będzie określać grupę, do której element ma trafić na nowej liście. | ||
Jako przykład posłuży nam poniższa lista książek: | ||
```javascript | ||
const books = [ | ||
{title: '1984', genre: 'Dystopian fiction', year: 1949}, | ||
{title: 'To Kill a Mockingbird', genre: 'Classic literature', year: 1960}, | ||
{title: 'The Great Gatsby', genre: 'Modernist novel', year: 1925}, | ||
{title: 'The Catcher in the Rye', genre: 'Classic literature', year: 1951}, | ||
{title: 'Pride and Prejudice', genre: 'Romance novel', year: 1813} | ||
]; | ||
``` | ||
|
||
Chcąc stworzyć nową listę, w której pozycje będą pogrupowane gatunkami, wystarczy wywołać `Object.groupBy` w następujący sposób: | ||
```javascript | ||
Object.groupBy(books, ({ genre }) => genre) | ||
|
||
// wynik: | ||
{ | ||
"Dystopian fiction": [ | ||
{"title": "1984", "genre": "Dystopian fiction", "year": 1949}, | ||
], | ||
"Classic literature": [ | ||
{"title": 'To Kill a Mockingbird', "genre": 'Classic literature', "year": 1960}, | ||
{"title": 'The Catcher in the Rye', "genre": 'Classic literature', "year": 1951}, | ||
], | ||
"Romance novel": [ | ||
{"title": 'Pride and Prejudice', "genre": 'Romance novel', "year": 1813} | ||
], | ||
"Modernist novel": [ | ||
{"title": "The Great Gatsby", "genre": "Modernist novel", "year": 1925} | ||
] | ||
} | ||
``` | ||
|
||
Bardziej zaawansowanym przykładem może być podział listy na grupy obejmujące nowe książki (wydane po 1900 roku) i stare (pozostałe): | ||
```javascript | ||
Object.groupBy(books, ({year}) => year > 1900 ? "new" : "old") | ||
|
||
// wynik: | ||
{ | ||
"new": [ | ||
{"title": "1984", "genre": "Dystopian fiction", "year": 1949}, | ||
{"title": "The Great Gatsby", "genre": "Modernist novel", "year": 1925}, | ||
{"title": 'To Kill a Mockingbird', "genre": 'Classic literature', "year": 1960}, | ||
{"title": 'The Catcher in the Rye', "genre": 'Classic literature', "year": 1951}, | ||
], | ||
"old": [ | ||
{"title": 'Pride and Prejudice', "genre": 'Romance novel', "year": 1813} | ||
] | ||
} | ||
``` | ||
|
||
## Przydatne linki | ||
- Kompatybilność z przeglądarkami: [https://caniuse.com/?search=Object.groupBy](https://caniuse.com/?search=Object.groupBy) | ||
- Dokumentacja: [https://developer.mozilla.org/.../Object/groupBy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy) |
Binary file not shown.
Binary file added
BIN
+41.1 KB
assets/img/posts/2024-07-26-czy-wiesz-jak-obslugiwac-bledy-w-rxjs/thumbnail.webp
Binary file not shown.
Binary file added
BIN
+329 KB
assets/img/posts/2024-09-09-czy-wiesz-czym-jest-i-jak-uzywac-object-groupby/thumbnail.webp
Binary file not shown.