Angular: преобразовать результат запроса в наблюдаемый - PullRequest
Новая
       4

Angular: преобразовать результат запроса в наблюдаемый

1 голос
/ 08 мая 2020

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

Теперь, когда я его полирую, у меня есть несколько запросов API для одного и того же ( информация о пользователе).

Многое из того, что я обнаружил в inte rnet, устарело и больше не работает (в основном, Rx Js материал).

Что у меня есть: обратный вызов от API с информацией о пользователе. Что я хочу: что-то глобально доступное в проекте (мне нужен только один запрос API для информации о пользователе)

Я сейчас пытаюсь превратить наблюдаемое в другое: 

@Injectable({
  providedIn: 'root',
})
export class LoginInfoService {
  constructor(private http: HttpClient) {}

  private userURL = `${environment.API}/loginUser`;

  private user$: Observable<LoggedUser>;
  private request = false;

  public retrieveUser(): Observable<LoggedUser> {

    if (!this.request&& !this.user$) {
      console.log("call request");
      this.user$ = this.getUserJson();
    }

    return this.user$;
  }

  private getUserJson() {
    console.log('actual request');
    this.request = true;
    return this.http.get<LoggedUser>(`${this.userURL}?key='123'`);
  }
}

Я использую для тестирования «json -server», и хотя я получаю только один «фактический запрос», сервер показывает там несколько запросов. Я использую последнюю стабильную версию Angular.

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Вот решение с двумя подписками, но только с одним запросом. Решено с помощью ReplaySubject: https://stackblitz.com/edit/only-one-request

PS: Я использовал другой API, поэтому вам нужно настроить userURL.

0 голосов
/ 08 мая 2020

Вы можете использовать shareReplay , HTTP-запрос будет выполнен только один раз, после чего результат будет кеширован для любой новой подписки. Также вы можете удалить переменную запроса. 

@Injectable({
  providedIn: 'root',
})
export class LoginInfoService {
  constructor(private http: HttpClient) {}

  private userURL = `${environment.API}/loginUser`;

  private user$: Observable<LoggedUser>;

  public retrieveUser(): Observable<LoggedUser> {
    return this.user$.pipe(shareReplay(1));
  }

  private getUserJson() {
    return this.http.get<LoggedUser>(`${this.userURL}?key='123'`);
  }
}
...