Get request does not get data on first call-CodePudding

I am working on an Angular project which needs to get data from my backend, which provides requests to an API, but before the backend can request the desired data, I need to send some parameters to the backend with a post request. After I get the data, within the getCar() method, I immediately call a few data handling methods.

When my project is built it sends a post Request and a get Request to the backend, but unfortunately, the get request is made before the backend finished the post request and does not have the required parameters ready, so the get request returns a null object which will cause TypeErrors in my handling methods are trying to handle the data. Once I reload the page, the data is returned properly.

I want to get the data on the first request which requires the getCar() method to wait until the post request is finished.

My component in which the services are called:

ngOnInit(): void {
    this.postUrlData();
    this.getCar();
    
  }

  postUrlData(){
    this.route.queryParams.subscribe(params => {
      this.urlData = {
        vin : params['vin'],
        dealerId: params['dealerid']
      };
    })
    
     this.apiService.postURLData(this.urlData).subscribe();
  }

  getCar(){
    this.apiService.getCertainCar().subscribe( data => {
      this.carData = data;
      console.log(data);
      this.filltechDetails();
      this.fillcarEquipment();
      this.fillCarDetails();
      
    });
  }

The api-services:


@Injectable({
  providedIn: 'root'
})

export class ApiServiceService {

 constructor(private http: HttpClient) { }

   getCertainCar(): Observable<any>{
      return this.http.get(this.serverUrl '/car')
   }

   postURLData(urlData:any):Observable<any>{
     return this.http.post(this.serverUrl "/urlData",urlData);
   }
}

CodePudding user response：

You should call get method when post request complete. For example you can do in subscribe like that:

ngOnInit(): void {
    this.postUrlData();
}

  postUrlData(){
    this.route.queryParams.subscribe(params => {
      this.urlData = {
        vin : params['vin'],
        dealerId: params['dealerid']
      };

    })
    
    this.apiService.postURLData(this.urlData).subscribe(() => {
      this.getCar();
    });   
  }

  getCar(){
    this.apiService.getCertainCar().subscribe( data => {
      this.carData = data;
      console.log(data);
      this.filltechDetails();
      this.fillcarEquipment();
      this.fillCarDetails();
      
    });   }

Also make sure that when you calling this.apiService.postURLData() method this.urlData is already defined otherwise you should call it inside queryParams.subscribe() to be sure that this.urlData already defined or you can get this.route.snapshot.queryParams which is just object not an observable

CodePudding user response：

I think the better way is to create a resolver so it would fetch your data before your page loads , then your needed params / data would be ready for your next API call. By resolver you can't have undefined data.

You can check this link: https://www.digitalocean.com/community/tutorials/angular-route-resolvers