开发者问题收集

获取请求在第一次调用时未获取数据

2022-07-19
724

我正在开发一个 Angular 项目,需要从后端获取数据,后端向 API 发出请求,但在后端请求所需数据之前,我需要使用 post 请求将一些参数发送到后端。获取数据后,在 getCar() 方法中,我立即调用一些数据处理方法。

当我的项目构建时,它会向后端发送一个 post 请求和一个 get 请求,但不幸的是,get 请求是在后端完成 post 请求之前发出的,并且没有准备好所需的参数,因此 get 请求返回一个空对象,这将导致我的处理方法在尝试处理数据时出现 TypeErrors。一旦我重新加载页面,数据就会正确返回。

我想在第一个请求中获取数据,这需要 getCar() 方法等到发布请求完成。

我的组件中调用了这些服务:

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();
      
    });
  }

api 服务:

@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);
   }
}
2个回答

您应该在发布请求完成时调用 get 方法。 例如,您可以在订阅中执行以下操作:

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();
      
    });   }

同时,请确保在调用 this.apiService.postURLData() 方法时 this.urlData 已定义,否则您应该在 queryParams.subscribe() 中调用它以确保 this.urlData 已定义,或者您可以获取 this.route.snapshot.queryParams ,它只是对象而不是可观察对象

Kirill
2022-07-19

我认为更好的方法是创建一个解析器,这样它就可以在页面加载之前获取数据,然后您所需的参数/数据就可以为下一次 API 调用做好准备。通过解析器,您不能拥有未定义的数据。

您可以查看此链接: https://www.digitalocean.com/community/tutorials/angular-route-resolvers

vistajess
2022-07-19