что делает pipe и map в rx js? - PullRequest
Новая
       7

что делает pipe и map в rx js?

0 голосов
/ 21 июня 2020

Я пытаюсь понять этот код. 

return this.http.post<any>(`http://localhost:8000/api/Authinticate`, { username, password })
            .pipe(map(user => {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                console.log(user);
                //this.currentUserSubject.next(user);
                return user;
            }));

что делает .pipe(map?

Ответы [ 2 ]

0 голосов
/ 21 июня 2020

Pipe - одна из самых важных концепций RX JS, которую необходимо изучить. Внутри канала вы можете использовать множество различных операторов, которые позволяют вам делать много разных вещей со значениями, которые поступают через ваш наблюдаемый объект. Чтобы дать вам несколько примеров того, что вы можете делать внутри канала:

  • Вы можете изменить данные на что-то другое (оператор 'map' и 'mapTo')
  • Вы можете бросить значения, которые не соответствуют вашим условиям (оператор «фильтр» и «отдельный»)
  • Перейти к другому наблюдаемому (оператор «switchMap» и «mergeMap»)
  • Объедините свой наблюдаемый объект с другим observable (оператор 'withLatestFrom')
  • Отложить ваше значение (оператор 'delay')

Из всех более чем 100 операторов, доступных для использования внутри канала, «карта» Оператор - самый базовый c и, вероятно, самый используемый. Что он делает, так это то, что он позволяет вам запустить некоторый код, написанный вами, чтобы преобразовать значение, поступающее по конвейеру, во что-то другое. Значение, которое вы возвращаете из оператора карты, станет новым значением.

Так, например, если вы хотите добавить 1 к каждому значению, которое проходит через канал, вы можете сделать:

pipe( map(startValue => { let myNewValue = startValue + 1; return myNewValue; }) )

0 голосов
/ 21 июня 2020

Pipe просто используется, чтобы сказать: «Я буду использовать один или несколько операторов после того, как это наблюдаемое излучает».

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

observableResult: number;

exampleFunction(): Observable<number> {
    return of(10)
}


ngOnInit() {
     this.exampleFunction().pipe(map(num => {
          console.log(num); // must be 10
          return 5;
     })).subscribe(result => {
         this.observableResult = result;
         console.log(this.observableResult); // must be 5.
     })
}

of оператор возвращает значение как наблюдаемое.

Для вашего примера:

Код отправляет запрос в api и сохраняя его в localstorage, и после этого он возвращает того же пользователя подписчику (откуда эта функция вызывалась).

Кроме того, есть лучший оператор для этого - tap. Если вы используете оператор tap вместо map, оператор return user не требуется. Потому что, используя tap, вы не можете изменять или манипулировать возвращаемым значением.

...