когда использовать tap () и когда использовать map () в RxJS

Question

A в документе описывается тап () со следующим кодом:

import { fromEvent } from 'rxjs';
import { tap, map } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const positions = clicks.pipe(
  tap(ev => console.log(ev)),
  map(ev => ev.clientX),
);
positions.subscribe(x => console.log(x));

, но я не понимаю, зачем использовать тап. Это просто логирование. В объяснении говорится:

**

Отображение каждого клика на позицию clientX этого клика, а также запись события клика

**

Пожалуйста, помогите мне понять это. Любая помощь очень ценится

Answer 1

Нажмите

Выполните побочный эффект для каждого излучения на наблюдаемом источнике, но верните наблюдаемое, идентичное источнику

Пример:

tap(value => console.log(value))

Карта

Применяет заданную функцию проекта к каждому значению, излучаемому источником Observable, и испускает результирующие значения как наблюдаемые.

Пример:

map(value => 'prefix' + value)

Почему бы не использовать карту или другие операторы для побочных эффектов, таких как log

Вы можете использовать карту, сканирование и любой другой оператор, который получает функцию и возвращает индивидуальный результат для реализации побочных эффектов. Это сделает ваш код очень трудным для понимания / отладки / поиска ошибок в будущем. При условии, что в общем случае побочные эффекты в трубах не годятся. Ведение журнала может быть исключением, если вам это нужно / нужно, и вы не хотите иметь много подписок для каждой точки регистрации. Поэтому тап может быть полезен. Вы можете адаптировать это к следующим шагам:

1. Старайтесь избегать как можно большего количества побочных эффектов
2. Если вам нужно что-то (ведение журнала), используйте касание, чтобы уточнить, что есть побочный эффект

Пример того, как вы могли, но не должны

switchMap(value => {
  console.log(value); // Side effect 1
  const newValue = foo(value);
  console.log(newValue); // Side effect 2
  return of(newValue);
})

Пример того, как вы можете и должны делать

tap(console.log), // Side effect 1
switchMap(value => of(foo(value))),
tap(console.log) // Side effect 2

Последнее слово: Когда вы изначально пишете код, который приносит мало пользы. Чем больше будет ваш проект, и в тот момент, когда другие люди попытаются найти ошибки, это значительно улучшит сэкономленное время.