Skip to content

Commit

Permalink
Merge branch 'master' into czy-wiesz-ze-nie-musisz-juz-klonowac-tabli…
Browse files Browse the repository at this point in the history
…c-by-wykonac-na-nich-typowe-operacje
  • Loading branch information
pogoma committed Sep 13, 2024
2 parents 79bcf4e + 0a0f337 commit e9b32d5
Show file tree
Hide file tree
Showing 7 changed files with 170 additions and 0 deletions.
6 changes: 6 additions & 0 deletions _authors/ptatarski.md
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
---
4 changes: 4 additions & 0 deletions _includes/post_author.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,21 @@
<a class="author" href="{{author.url}}">
<img class="author-image" src="/assets/img/authors/{{author.image}}" alt="author">
<span class="author-name">{{author.name}}</span>
{%- if author.github -%}
<a class="author" href="https://github.com/{{author.github}}">
<img class="github-icon" src="/assets/icon/github.svg">
</a>
{% endif %}
</a>
{%- if coauthor -%}
<a class="author authors-space" href="{{coauthor.url}}">
<img class="author-image" src="/assets/img/authors/{{coauthor.image}}" alt="author">
<span class="author-name">{{coauthor.name}}</span>
{%- if coauthor.github -%}
<a class="author" href="https://github.com/{{coauthor.github}}">
<img class="github-icon" src="/assets/icon/github.svg">
</a>
{% endif %}
</a>
{% endif %}
</div>
86 changes: 86 additions & 0 deletions _posts/pl/2024-07-26-czy-wiesz-jak-obslugiwac-bledy-w-rxjs.md
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)
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 added assets/img/authors/ptatarski.webp
Binary file not shown.
Binary file not shown.
Binary file not shown.

0 comments on commit e9b32d5

Please sign in to comment.