我必须在我的angular应用程序中进行两个并行的API调用,并且每个组件中的数据都将被使用。以下是我的服务和组件文件代码。我使用forkJoin
进行并行调用和处理。因为根据我的理解,forkJoin
确保两个API调用均成功时将调用成功回调。
在运行时,我可以看到在每个服务中都调用了成功回调,但是在组件文件中却没有。
api.services.ts
$getRequestById(id: string): Subject<any> {
const data_subject = new Subject<any>();
this.$http.get(API_URL + '/' + id).subscribe(
(dto) => data_subject.next(new Request(dto)), // THIS IS GETTING EXECUTED
(error) => data_subject.error(error)
);
return data_subject;
}
$getAllRequestsForId(id: string): Subject<any> {
const data_subject = new Subject<any>();
this.$http.get(API_URL + '?request_id=' + id).subscribe(
(dto) => data_subject.next(dto.map(i => new Request(i))),
(error) => data_subject.error(error)
);
return data_subject;
}
在我的组件文件中,
home.component.ts
const request = this.service.$getRequestById(this.id);
const allRequests = this.service.$getAllRequestsForId(this.id);
forkJoin([request, allRequests])
.subscribe(
(response) => this.setResponse(response), // THIS LINE IS NOT GETTING CALLED.
(error) => this.notification.error('Error occured while fetching request details! Please try again.')
);
但是,如果我在任何组件中独立运行此API调用(如下所示),则它可以正常工作。
this.service.$getRequestById(this.id).subscribe(
(response) => this.setResponse(response), // THIS GETS EXECUTED
(error) => this.notification.error("An error occured")
)
我正在应用程序的其他部分独立使用这些服务,没有任何问题,但是当与forkJoin
结合使用时,不会调用成功回调。知道如何解决在forkJoin
以及独立调用中都有效的问题吗?
答案 0 :(得分:2)
我会说,使用RxJS Subject
会使调用不必要地复杂。您可以从HttpClient返回可观察对象,并使用forkJoin
将它们组合起来。
来自forkJoin
docs:
等待Observable完成,然后合并它们的最后一个值 发出。
因此,如果Subject
之一未完成,则forkJoin
不会发出响应。如果您希望在订阅之前修改可观察对象的响应,则可以使用RxJS map
和catchError
运算符。您可能不需要这里的catchError
,因为您没有从HTTP请求中修改错误。
尝试以下
服务
import { pipe } from 'rxjs';
import { map } from 'rxjs/operators';
$getRequestById(id: string): Observable<any> {
return this.$http.get(API_URL + '/' + id).pipe(
map(dto => new Request(dto))
);
}
$getAllRequestsForId(id: string): Observable<any> {
return this.$http.get(API_URL + '?request_id=' + id).pipe(
map(response => response.map(item => new Request(i))) // <-- inner `map` is array method, outer `map` is RxJS operator
);
}
控制器
const request = this.service.$getRequestById(this.id);
const allRequests = this.service.$getAllRequestsForId(this.id);
forkJoin([request, allRequests]).subscribe(
(response) => this.setResponse(response),
(error) => this.notification.error('Error occured while fetching request details! Please try again.')
);
catchError
使用catchError
要记住的最重要的事情是返回一个可观察的对象。您可以使用RxJS throwError
发出错误并完成。或者,您可以使用RxJS of
返回一个可观察值。
import { pipe, throwError, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
// throwing error using `throwError`
$getRequestById(id: string): Observable<any> {
return this.$http.get(API_URL + '/' + id).pipe(
map(dto => new Request(dto)),
catchError(error => throwError('Ran into an error: ', error))
);
}
// throwing error using `of`
$getRequestById(id: string): Observable<any> {
return this.$http.get(API_URL + '/' + id).pipe(
map(dto => new Request(dto)),
catchError(error => of('Ran into an error: ', error))
);
}
答案 1 :(得分:1)
您的代码应为
$getRequestById(id: string): Observable<any> {
return this.$http.get(API_URL + '/' + id).pipe(map(
(dto) => new Request(dto)), // THIS IS GETTING EXECUTED
(catchError) => throwError(err)
);
}
$getAllRequestsForId(id: string): Observable<any> {
return this.$http.get(API_URL + '?request_id=' + id).pipe(map(
(dto) => dto.map(i => new Request(i))),
(catchError) => throwError(error)
);
}
home.component.ts
const request = this.service.$getRequestById(this.id);
const allRequests = this.service.$getAllRequestsForId(this.id);
forkJoin([request, allRequests])
.subscribe(
(response) => this.setResponse(response), // THIS LINE IS NOT GETTING CALLED.
(error) => this.notification.error('Error occured while fetching request details! Please try again.')
);
答案 2 :(得分:0)
未调用API,因为您已经通过使用subscribe
消耗了API,因此请删除订阅并像这样再次尝试
api.services.ts
$getRequestById(id: string) {
return API_URL + '/' + id;
}
$getAllRequestsForId(id: string) {
return API_URL + '?request_id=' + id;
}
home.component.ts
const request = this.service.$getRequestById(this.id);
const allRequests = this.service.$getAllRequestsForId(this.id);
forkJoin([request, allRequests])
.subscribe(
(response) => {
console.log(response);
this.setResponse(response)
},
(error) => this.notification.error('Error occured while fetching request details! Please try again.')
);
答案 3 :(得分:0)
forkjoin仅在每个可观察到的源完成后才调用订阅回调。在服务功能中,您返回的主题从未完成,因此forkjoin将永远等待。
此外,您无需在服务功能中创建新主题。直接返回http.get的结果。如果您需要在服务中转换结果,则可以通过一些rxjs运算符通过管道传递结果
api.services.ts
$getRequestById(id: string): Subject<any> {
return this.$http.get(API_URL + '/' + id)
}
$getAllRequestsForId(id: string): Subject<any> {
return this.$http.get(API_URL + '?request_id=' + id).pipe(
concatAll(),
map(i => new Request(i)),
toArray()
);
}