how to wait http response in observable (rxjs)

This is the original code.

// info.service.ts.  

  this.info$ = new BehaviorSubject<Info>(null);

  async getInfo() {
    try {
      const info = await this.infoApi.getInfo();
      console.log(info) // info {name: 'sdf', 'age': 12}
      this.info$.next(info);
    } catch {
      this.info$.next(null);
    }
  }



  // infoApi Class
  getInfo() {
    return this.apiService.get<Info>(`/info`, this.infoService....);
  }

For asynchronous processing using rxjs, we modified the code as follows. Other asynchronous processing codes in my project have also been modified to rxjs in the following way, and they are working fine. However, only the getinfo service does not work properly. Asynchronous processing is not progressing properly. As a result of checking the network panel, the info data request is checked in the managed state. Please let me know if there are any expected problems.
(Async, wait is not available, so I'm trying to use Rxjs. )

Both versions of code do not work as expected.

first version

// info.service.ts
  getInfo() {
    from(this.infoApi.getInfo()).subscribe(
      info => {this.info$.next(info); 
      console.log(info) // null
      error => {this.info$.next(error)
      }
    )
  }

  // infoApi Class
  getInfo() {
    return this.apiService.get<Info>(`/info`, this.infoService....);
  }

// api.service.ts
  get<T>(url: string, opts?: options) {
    return this.request<T>('GET', url, null, opts);
  }

second version

// info.service.ts
  getInfo() {
   this.infoApi.getInfo().subscribe(
      info => {this.info$.next(info); 
      console.log(info) // null
      error => {this.info$.next(error)
      }
    )
  }

  // infoApi Class
  getInfo() {
    return from(this.apiService.get<Info>(`/info`, this.infoService....);
  }

// api.service.ts
  get<T>(url: string, opts?: options) {
    return this.request<T>('GET', url, null, opts);
  }

Via Active questions tagged javascript - Stack Overflow https://ift.tt/4KIFwbN