获取请求在第一次调用时未获取数据
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