Это вольный перевод очень хорошей статьи
https://netbasal.com/creating-custom-operators-in-rxjs-32f052d69457
В этом материале вместо слова наблюдаемый (Observable) используется слово издатель, а вместо слова наблюдатель (Observer) - слово подписчик.
Что такое оператор? Это издатель, который принимает на вход другого
издателя. Простейший оператор будет выглядеть так:
function myOperator<T>(source:Observable<T>){
return source;
}
Этот оператор бесполезен, так как возвращает (или передаёт далее по
цепочке) того же издателя, что и получает, но тем не менее это
оператор!
Теперь давайте попробуем вернуть какого-нибудь другого издателя:
function myOperator<T>(source: Observable<T>){
return new Observable(subscriber=>{
subscriber.next(1);
subscriber.complete();
})
}
Этот оператор никак не использует входного издателя, а просто возвращает единицу.
Теперь попробуем создать оператор, который будет отфильтровывать
значения null и undefined и не будет пускать их дальше по цепи.
function filterNil() {
return function <T>(sourse: Observable<T>) {
return new Observable(s => {
sourse.subscribe(
{
next: (v) => {
if (v!==undefined&&v!==null) {
s.next(v);
}
},
error: (error) => {
s.error();
},
complete: () => {
s.complete();
}
}
)
})
}
}
Почему мы обернули оператор в ещё одну функцию? Это для того, чтобы было
удобно передавать оператору какие-то аргументы. Теперь эта функция
возвращает оператор и вызов функции равносилен применению оператора.
Но что-то не так - мы только что создали утечку памяти. Каждый
издатель должен возвращать функцию unsubscribe(), которая выполняет все
необходимые по очистке памяти действия, а издатель в нашем операторе
такую функцию не возвращает. Для того, чтобы всё заработало как надо
добавим ещё одну строку
function filterNil() {
return function <T>(sourse: Observable<T>) {
return new Observable(s => {
sourse.subscribe(
{
next: (v) => {
if (v!==undefined&&v!==null) {
s.next(v);
}
},
error: (error) => {
s.error();
},
complete: () => {
s.complete();
}
}
)
return () => s.unsubscribe(); <===
})
}
}
Конструкция Observable.subscribe() возвращает объект Subscription,
поэтому можно сократить код, показанный выше просто возвратив сам объект
подписки. Теперь при вызове unsubscribe() будет вызываться метод
unsubscribe() подписки, которую мы возвращаем.
function filterNil() {
return function <T>(sourse: Observable<T>) {
return new Observable(s => {
return sourse.subscribe(
{
next: (v) => {
if (v!==undefined&&v!==null) {
s.next(v);
}
},
error: (error) => {
s.error();
},
complete: () => {
s.complete();
}
}
)
})
}
}
Рекомендуется создавать свои операторы на основе существующих и вот как
будет выглядеть оператор filterNil, созданный при помощи оператора
filter
function filterNil() {
return function <T>(source: Observable<T>) {
return source.pipe(filter(v=>v!==undefined && v!=null));
}
}
А так как операторы функции блока pipe сами по себе уже возвращают функции, то
есть оператор filter уже вернёт нужную нам функцию, принимающую и
возвращающую издателя, то можно сократить код до
function filterNil() {
return filter(v=>v!==undefined&&v!=null);
}
Top comments (0)