Вернуть наблюдаемое и установить значение в том же методе с angular

Question

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

Теперь мой метод userService.getUserDetails() выглядит следующим образом:

private requestUrl: string;
private bic: string;
private id: string;
private name: string;

getUserDetails(): Observable<User> {
this.bic = 'aaa';
this.id= '123';

this.requestUrl = `${configs.api}v1/bics/` + encodeURIComponent(this.bic) + `/ids/` + encodeURIComponent(this.id) + `/users`;

const userObservable = this.http.get<User>(this.requestUrl).pipe(catchError(this.handleError));

userObservable.subscribe(data => this.name = data.name);

return userObservable;
}

Я хочу делать две вещи, когда вызывается getUserDetails: 1) возвращать Observable<User> 2) устанавливать значение name, чтобы я мог получить к нему доступ позже в других классах, внедряя эту службу в конструкторы, не вызывая снова запрос http. Я думаю, что хочу иметь что-то вроде этого:

  getName() {
return this.name;
 }

Так что я не уверен насчет подписки, потому что я получаю неопределенное значение после попытки использовать значение. Какой здесь лучший подход?

Answer 1

Попробуйте использовать наблюдаемое следующим образом:

   public name: string;
   public bic: string;
   public id: string;
   public getUserDetails(): Observable<User> {
        this.bic = '...';
        this.id = '...';
        this.requestUrl = `${configs.api}v1/bics/` + encodeURIComponent(this.bic) + `/ids/` + encodeURIComponent(this.id) + `/users`;

        return this.http.get<User>(this.requestUrl).pipe(catchError(this.handleError));
    }

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

В вашем компоненте вы можете иметь это:

    constructor(private readonly _yourService: YourService) {}

    public ngOnInit(): void {
    this.getUserDetails();
    console.log(this._yourService.name) // can be undefined, since the observable is asynchronous and probably isnt finished yet
    }

    public getUserDetails(): void{
    this._yourService.getUserDetails().subscribe(
    data => {
    this._yourService.name = data.name;
    // start doing other things, this.name should be defined, if your service returned the data correctly.
    }
    )
    }

Альтернативно, вы также можете делать все это в вашем сервисе, это действительно ваш выбор дизайна.

Answer 2

используйте «tap», в вашем сервисе

name:any;
const userObservable = this.http.get<User>(this.requestUrl).pipe(
tap((res)=>{
    this.name=res;
}),
catchError(this.handleError)
);

Иногда используется своего рода «кеш»

name:any;
const userObservable = (this.name)?of(name):
  this.http.get<User>(this.requestUrl).pipe(
    tap((res)=>{
      this.name=res;
    }),
      catchError(this.handleError)
    );

Таким образом, вы всегда можете подписаться на функцию, первая раз, сделайте вызов http, второй используйте значение имени - of(name) верните наблюдаемое