- PVSM.RU - https://www.pvsm.ru -
В этом посте мы поговорим о новых возможностях и доработках последней версии RxJS 6.5.0 [1].
Теперь RxJS предоставляет встроенную поддержку нативного fetch [2] API, включая возможность прерывать запросы при помощи AbortController [3].
import { of } from 'rxjs';
import { switchMap, catchError } from 'rxjs/operators';
import { fromFetch } from 'rxjs/fetch';
const users$ = fromFetch('https://reqres.in/api/users').pipe(
switchMap(response => {
if (response.ok) {
return response.json();
} else {
return of({ error: true, message: `Error ${response.status}` });
}
}),
catchError((error) => of({ error: true, message: error.message }))
);
users$.subscribe({ next(data) { ... }, complete() { ... } });
Это мне понравилось больше всего. Оператор forkJoin теперь принимает словарь источников:
import { forkJoin, timer } from 'rxjs';
import { take, mapTo } from 'rxjs/operators';
const source = forkJoin({
todos: timer(500).pipe(mapTo([{ title: 'RxJS'}])),
user: timer(500).pipe(mapTo({ id: 1 }))
});
source.subscribe({
next({ todos, user }) { }
});
Кроме того, использование данного оператора в виде forkJoin(a, b, c, d)
признано устаревшим, вместо этого нужно писать forkJoin([a, b, c, d])
.
// DEPRECATED
forkJoin(of(1), of(2)).subscribe();
// use an array instead
forkJoin([of(1), of(2)]).subscribe();
Существующий оператор partition
теперь считается устаревшим, и на его место приходит новый порождающий observable-оператор partition
.
Partition [4] разделяет объект-источник на два объекта типа observable, один — для значений, которые удовлетворяют заданному предикату, и второй — для значений, которые не удовлетворяют.
import { fromEvent, partition } from 'rxjs';
const clicks$ = fromEvent(document, 'click');
const [clicksOnH1$, clicksElsewhere$] =
partition(clicks$, event => event.target.tagName === 'H1');
clicksOnH1$.subscribe({
next() { console.log('clicked on h1') }
});
clicksElsewhere$
.subscribe({
next() {
console.log('Other clicked')
}
});
В новой версии больше не используются сигнатуры combineLatest
, за исключением combineLatest([a, b, c])
. О причинах такого изменения читайте здесь [5].
Используйте оператор scheduled
, чтобы сконфигурировать планировщик для существующего observable. Планируемые (те, которые принимают планировщик в качестве параметра) версии операторов from
, range
и других признаны устаревшими.
import { of, scheduled, asapScheduler } from 'rxjs';
console.log(1);
// DEPRECATED
// of(2, asapScheduler).subscribe({
// next(value) {
// console.log(value);
// }
// });
scheduled(of(2), asapScheduler).subscribe({
next(value) {
console.log(value);
}
});
console.log(3)
Наша команда создает крутой инструмент TestMace [6] — мощная IDE для работы с API. Создавайте сценарии, тестируйте эндпоинты и пользуйтесь всей мощью продвинутого автодополнения и подсветки синтаксиса. Пишите нам! Мы тут: Telegram [7], Slack [8], Facebook [9], Vk [10]
Автор: dimansny
Источник [11]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/316757
Ссылки в тексте:
[1] RxJS 6.5.0: https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#650-2019-04-23
[2] fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[3] AbortController: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
[4] Partition: https://netbasal.com/rxjs-eight-operators-worth-getting-to-know-2b6c18e601d
[5] здесь: https://github.com/reactivex/rxjs/commit/6661c79
[6] TestMace: https://client.testmace.com/
[7] Telegram: https://t.me/testmace
[8] Slack: https://testmaceslackin.herokuapp.com/
[9] Facebook: https://www.facebook.com/testmace/
[10] Vk: https://vk.com/testmace
[11] Источник: https://habr.com/ru/post/450718/?utm_campaign=450718
Нажмите здесь для печати.