making multiple http requests inside angular observable

Question

I'm trying to use the http module in angular to make requests within my service.ts file on init of my app component.... my issue is that my function getStats() is an observable and it simply returns stats before making the second post request to my json server

what I would like to do is make sure both requests finish before returning

I have tried using a promise within my function but my IDE throws an error that they aren't allowed inside observables, I tried using callbacks and I'm get a similar error. I'm trying to understand what the valid syntax would be for handling multiple requests within this function as the requests are being made to 2 different locations at the 'same' time

any insight for my noobish request is greatly appreciated :)

specs.service.ts

export class SpecsService {
  private apiUrl = 'http://localhost:3000'
  constructor(private http:HttpClient) {}

  getStats():Observable<Object>{

    //get current stats
    let stats = this.http.get(`http://localhost:8888/fetchStats`)
  
    //send stats to json server store
    const url = `${this.apiUrl}/progressionData`; //json server collection location
    this.http.post(url,stats,httpOptions)

    return stats
 }

}

my app.component.ts

import { Component, Output,EventEmitter } from '@angular/core';
import { SpecsService } from 'src/app/specs.service';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'pctothemoon';
  stats: any

  
  constructor(private specsService: SpecsService) {
    this.stats = this.specsService.getStats();
   }

  ngOnInit(): void {
    //current stats
    this.specsService.getStats().subscribe((response) => this.stats=response)
    }
}

making multiple http requests inside angular observable

0 Answers0