从Angular Service返回给Controller的API响应

Question

我是Angular的新手，我正在尝试进行api调用并返回响应到我的表单，以便我可以显示成功消息。

这是我的服务文件

中的函数

upload(files: any): Observable<any> {
let fileContent = '';
//set the headers
const corsHeaders = new HttpHeaders();
corsHeaders.set('Content-Type', 'text/xml');
corsHeaders.set('Accept', '*/*');
corsHeaders.set('Access-Control-Allow-Origin', '*');
//create form data
const formData = new FormData();
//store form name as "file" with file data
formData.append('UploadedFile', files[0], files[0].name);
this.http
.post(this.baseUrl, formData, {
headers: corsHeaders,
observe: 'events',
reportProgress: true,
})
.subscribe(
(ApiResponse) =>
{                    
if (ApiResponse.type === HttpEventType.UploadProgress) {
console.log('Upload Progress:' + ApiResponse.loaded + '%');
} else if (ApiResponse.type === HttpEventType.Response) {
console.log("Second stage" + ApiResponse);
} else if (ApiResponse.type === HttpEventType.User)
{
console.log("User Sent a custom message");
}

}

);
return new Observable();
}

这是我在组件

中的内容

onUpload() {
this.uploadService
.upload(this.UploadedFiles)
.subscribe(this.validateSvrResponse(Event));
}

如何返回订阅服务的结果?到this.validateSvrResponse函数

Answer 1

您可以将从API返回的响应分配给一个变量，然后将其传递给函数:

this.uploadService
.upload(this.UploadedFiles)
.subscribe(event=> this.validateSvrResponse(event), error => this.onUploadFailed(error));

然后在validateSvrResponse函数

validateSvrResponse(event){
// Do something
}
onUploadFailed(error){
// Do Something
}

Answer 2

最好使用拦截器来设置API调用的头，通常我们使用拦截器，因为这样我们只需要编写一次代码，用你的方法你需要手动设置每个API调用的头。

请看一下Angular关于拦截器的文档:

https://angular.io/api/common/http/HttpInterceptor

关于你的问题，你的代码中有一个错误。问题是你在服务中订阅了http调用，但是如果你想在组件中使用响应，你就不能这样做。

服务中的方法只需要返回响应(如果你想写一些控制台日志或做一些映射等，你可以使用rxjs管道操作符)，组件中的方法需要订阅响应可观察对象。

的例子:

upload(files: any): Observable<any> {
let fileContent = '';
// It is better to handle this in some Interceptor.
const corsHeaders = new HttpHeaders();
corsHeaders.set('Content-Type', 'text/xml');
corsHeaders.set('Accept', '*/*');
corsHeaders.set('Access-Control-Allow-Origin', '*');
//create form data
const formData = new FormData();
//store form name as "file" with file data
formData.append('UploadedFile', files[0], files[0].name);
return this.http
.post(this.baseUrl, formData, {
headers: corsHeaders,
observe: 'events',
reportProgress: true,
});

}

现在，你需要在组件中订阅这个方法:

// component code
.
.
.
onUpload() {
this.uploadService
.upload(this.UploadedFiles)
.subscribe(event => this.validateSvrResponse(event));
}