如何等待HTTP响应角

Question

我试图上传一个文件，读取它，然后重定向到一个组件，但它不读取文件，我已经尝试等待，但我不知道把它放在哪里，或者如果有更多的解决方案

组件

upload() {
this.progress.percentage = 0; 
this.currentFileUpload = this.selectedFiles.item(0);
this.uploadService.pushFileToStorage(this.currentFileUpload).subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
this.progress.percentage = Math.round(100 * event.loaded / event.total);
} 
else  if (event.type === HttpEventType.Response) {

let hud: Hud
hud =event.body as Hud
for (let i =0; i<this.dataService.huds.length; i++ ){
if (this.dataService.huds[i].nombre_mesa===hud.nombre_mesa){
this.dataService.huds.splice(i,1)
}
}
this.dataService.huds.push(event.body as Hud)


}       
});
this.selectedFiles = undefined;
}

服务

pushFileToStorage(file: File): Observable<HttpEvent<{}>> {
let formdata: FormData = new FormData();
formdata.append('file', file);
const req = new HttpRequest('POST', 'http://localhost:8080/post', formdata, {
reportProgress: true,
responseType: 'json'
});
return this.http.request(req);
}

Answer 1

你可以添加你的逻辑在完成这个回调是调用后的动作响应

this.uploadService.pushFileToStorage(this.currentFileUpload).subscribe({
next: value => console.log(value),
error: err => console.error(err),
complete: () => console.log('DONE!')
});

Answer 2

pushFileToStorage(file).subscribe(event =>
switch (event.type) {
case HttpEventType.UploadProgress:
console.log('upload progression percentage: ', Math.round(event.loaded * 100 / event.total));
break;
case HttpEventType.Response:
// upload complete.
break;
});