Перехват ответа httpClient внутри службы с помощью rxjs

Question

У меня есть LoginComponent (форма для учетных данных) и LoginService для вызова моего API с помощью httpClient.

Обычно в моих службах я отвечаю на звонок, чтобы подписаться на него внутри своего компонента.

Например:

doSomething() {
    return this.http.post<any>(...);
}

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

Я нашел это решение в учебном пособии, но я думаю, что это не самый подходящий способ, и, возможно, есть лучшее решение, использующее канал rxjs.

AuthService:

login(userName: string, password: string, onSuccess: () => void, onError: (error) => void) {

  this.http.post("https://localhost:5001/api/auth/login", {userName: userName, password: password})
    .subscribe(response => {
      let token = (<any>response).token;
      localStorage.setItem("jwt", token);
      this.readUserFromLocalStorage();

      onSuccess();
    }, err => {
      onError(err);
    });
}

И внутри моего компонента

login() {
  this.auth.login(this.userName, this.password,
    () => this.router.navigateByUrl('/'),
    (error) => this.invalidLogin = true
  );
}

Answer 1

В вашем сервисе аутентификации вы можете использовать tap внутри pipe.

A tap - это действительно хороший способ что-то сделать с ответом без его изменения. (Если вам нужно изменить его по пути к вашему компоненту, то вам, вероятно, следует использовать функцию map.

  this.http.post("https://localhost:5001/api/auth/login", {userName: userName, password: password})
    .pipe(tap(response => {
      let token = (<any>response).token;
      localStorage.setItem("jwt", token);
      this.readUserFromLocalStorage();
     }));
}

Тогда вы можете подписаться на свой компонент.

login() {
  this.auth.login(this.userName, this.password).subscribe(() => {
    this.router.navigateByUrl('/')
  },
    (error) => this.invalidLogin = true
}

Таким образом, вам не нужно перезванивать на ваш сервис! Надеюсь, это поможет.