Операторы RxJS: повторить или повторить?
Так в чем же разница между повтором и повтором в RxJS? Изучите удобные варианты использования обоих этих операторов, чтобы лучше понять их.
Когда я только начал изучать RxJS несколько лет назад, мне было не так очевидно, почему у нас есть два оператора в RxJS для выполнения повторяющейся логики. Не только у меня может возникнуть такой вопрос, поэтому в этой статье я рассмотрю оба повторить попытку а также повторение операторы, а также возможные варианты их использования.
повторить… или повторить?
В RxJS оба повторение а также повторить попытку операторы позволяют вам условно повторно подписаться на прекращенный исходный наблюдаемый объект, к которому они были применены.
Оба они делают исходную наблюдаемую последовательность перезапущенной.
Основное отличие
повторение — переподписывается при получении onComplete(), но не по ошибке.
повторить попытку — повторно подписывается, когда получает onError().
С точки зрения возможных вариантов использования:
Если вы хотите повторить УСПЕШНУЮ выборку данных, завернутую в наблюдаемую, используйте повторение.
Если вы хотите повторить выборку данных FAILED, завернутую в наблюдаемую, используйте повторить попытку.
Теперь давайте подробнее рассмотрим каждый из них на примерах.
повторить попытку
повторить (количество)
Он возвращает Observable, который отражает исходный Observable, за исключением ошибки.
Если исходный Observable вызывает ошибку, этот метод повторно подпишется на исходный Observable максимум на считать повторные подписки
считать — Количество повторных попыток перед сбоем. По умолчанию -1.
Вот ванильный пример JS для работы с нестабильным сетевым подключением. мы делаем наблюдаемый вызов Ajax и используем оператор повтора. в случае, если первый вызов Ajax возвращает ошибку, оператор повторной попытки повторит запрос ajax еще три раза. если одна из этих попыток будет успешной, она предоставит данные для обратного вызова подписчиков onNext.
если все три дополнительные попытки не увенчаются успехом, то подписчикам будет передан обработчик обратного вызова onError.
let Rx = window['rxjs'];
const {defer} = Rx;
const {take, repeat} = Rx.operators;
const {ajax} = Rx.ajax;
console.clear();
let counter=0;
const getData = () => defer(() => ajax('
.pipe(repeat(2))
let repetableObservable = getData();
repetableObservable.subscribe(
(data) => console.log(data.response),
console.warn
)
Давайте попробуем запустить его в кодовая ручка.
И, как вы можете видеть, у нас есть один неудачный запрос и еще 4 повторных попытки (все они также не увенчались успехом, поскольку в учебных целях мы пытались получить несуществующий URL-адрес).
Заключить:
- повторить попытку возвращает Observable, который отражает исходный Observable.
- Если исходный Observable вызывает ошибку, этот метод повторно подпишется на исходный Observable (повторит выполнение исходной последовательности) для максимального числа повторных подписок значения параметра.
- Если одна из повторных попыток прошла успешно — данные о событии будут переданы обработчикам обратного вызова onNext подписчиков. Если все повторные попытки завершились неудачно, ошибка будет передана обработчикам onError.
- Один из возможных вариантов использования — повтор неудачных запросов ajax.
повторение
повторить (счет)
Возвращает Observable, который максимально повторяет поток элементов, испускаемых исходным Observable. считать раз.
считать — Количество повторений исходных наблюдаемых элементов, число 0 даст пустой наблюдаемый. По умолчанию -1.
Посмотрите на этот пример:
Мы берем исходную последовательность и запускаем ее дважды.
Заметь повторение оператор рассматривает начальный запуск как первый.
Теперь давайте рассмотрим более сложный вариант использования — скажем, у нас есть серверная часть, но она приносит не все данные сразу, а постранично. Итак, давайте реализуем выборку определенного количества разбитых на страницы порций данных из серверная часть:
let Rx = window['rxjs'];
const {defer} = Rx;
const {take, repeat} = Rx.operators;
const {ajax} = Rx.ajax;
console.clear();
let counter=0;
const getData = () => defer(() => ajax('
.pipe(retry(2), repeat(2))
let repetableObservable = getData();
repetableObservable.subscribe(
(data) => console.log(data.response),
console.warn
)
Прежде чем я опишу этот код — обратите внимание, что мы обернули исходный код в откладывать функции из RxJS. Каждый раз, когда повторение оператор повторно запускает исходный код, наблюдаемый — откладывать будет выполнять свою фабричную функцию, поэтому наш URL-адрес будет иметь обновленное значение счетчика. Вы можете прочитать больше о откладывать здесь
Давайте теперь посмотрим, как это работает:
- Когда мы подписываемся, источник делает первый вызов со страницей = 0 (переменная-счетчик).
- После успешного извлечения данных мы отправляем данные подписчикам. И затем исходный наблюдаемый завершается — так повторение начинает работать — и перезапускаю исходники — это откладывать функция в нашем случае.
- Функция Defer вызывает свою фабричную функцию и возвращает наблюдаемое ajax с новым значением счетчика. Итак, теперь мы запрашиваем API со страницей = 1.
- Новая страница данных также выдается подписчикам.
Вы можете попробовать запустить этот код самостоятельно в кодовая ручка.
Заключить:
- повторение возвращает Observable, который максимально повторяет поток элементов, испускаемых исходным Observable считать раз.
- считать param — количество раз, когда исходные наблюдаемые элементы повторяются, число 0 даст пустое наблюдаемое. В отличие от повторной попытки — оператор повтора рассматривает первоначальный запуск source$ как первую попытку, поэтому источник будет повторяться (count — 1) раз.
- повторение — повторно подписывается, когда получает onComplete() из исходной последовательности, но не по ошибке.
- Если вам нужно, чтобы исходный код повторялся с разными параметрами, используйте функцию отсрочки Rx.JS.
Можем ли мы использовать их вместе?
Можем ли мы использовать эти оба повторить попытку а также повторение?
Определенно да! Если вы хотите повторить исходные запросы и повторить попытку, если один из повторных вызовов не удался — вы можете использовать оба оператора.
Здесь, в этом примере, мы запрашиваем разбитую на страницы информацию дважды с помощью повторение оператор. Если какой-то из запросов завершится ошибкой, retry перезапустит его.
let Rx = window["rxjs'];
const {defer} = Rx;
const {take, repeat} = Rx.operators;
const {ajax} = Rx.ajax;
console.clear();
let counter=0;
const getData = () => defer(() => ajax('
.pipe(retry(2), repeat(2))
let repetableObservable = getData();
repetableObservable.subscribe(
(data) => console.log(data.response),
console.warn
)
retryWhen и RepeatWhen
Когда я впервые увидел повторить попытку а также повторение примеры операторов моя мысль была — могу ли я добавить некоторую задержку между повторными вызовами ajax?
И это когда операторы повторить попытку когда а также повторитькогда вступить в игру — но это тема другой статьи — будем на связи!
Этот пост изначально был размещен на dev.to портал.
Видеокурс для начинающих RxJS с подробными пояснениями.
Packtpub.com и я подготовили целую RxJS курс со многими другими подробностями о том, как вы можете решать свои повседневные задачи разработчика с помощью этой удивительной библиотеки. Это может быть интересно для начинающих, но также содержит сложные темы. Взглянем!
