Я пытаюсь отобразить пользователям список «отчетов», которые они могут добавить, для чего требуется комбинация нескольких запросов AJAX и наблюдаемых - один запрос к API для поиска «приложений», к которым они могут получить доступ, а затем несколько запросовдо определенной конечной точки для каждого приложения.После выполнения этого шага мне больше не нужно делать запросы ajax.
У меня что-то работает, но я не совсем понимаю, и мне кажется, что должен быть гораздо более простой способ сделать это.
У меня есть какой-то рабочий код прямо сейчас, однако я нахожу его слишком сложным и с трудом понимаю, как заставить его работать.
private _applications: ReplaySubject<Application>;
private _applicationReports: ReplaySubject<ApplicationReports>;
// Ajax request to fetch which applications user has access to
public fetchApplications(): Observable<Application[]> {
return this._http.get('api/applications').pipe(
map(http => {
const applications = http['applications'] as Application[];
applications.forEach(app => this._applications.next(app));
this._applications.complete();
return applications;
})
);
}
// Returns an observable that contains all the applications
// a user has access to
public getApplications(): Observable<Application> {
if (!this._applications) {
this._applications = new ReplaySubject();
this.fetchApplications().subscribe();
}
return this._applications.asObservable();
}
// Returns an observable which shows all the reports a user has
// from all the application they can access
public getApplicationReports(): Observable<ApplicationReports> {
if (!this._applicationReports) {
this._applicationReports = new ReplaySubject();
this.getApplications().pipe(
mergeMap((app: Application) => {
return this._http.get(url.resolve(app.Url, 'api/reports')).pipe(
map(http => {
const reports: Report[] = http['data'];
// double check reports is an array to avoid future errors
if (!reports || !Array.isArray(reports)) {
throw new Error(`${app.Name} did not return proper reports url format: ${http}`);
}
return [app, reports];
}),
catchError((err) => new Observable())
);
})
).subscribe(data => {
if (data) {
const application: Application = data[0];
const reports: Report[] = data[1];
// need to normalize all report urls here
reports.forEach(report => {
report.Url = url.resolve(application.Url, report.Url);
});
const applicationReports = new ApplicationReports();
applicationReports.Application = application;
applicationReports.Reports = reports;
this._applicationReports.next(applicationReports);
}
}, (error) => {
console.log(error);
}, () => {
this._applicationReports.complete();
});
}
return this._applicationReports.asObservable();
}
Ожидаемая функциональность:
КогдаПользователь открывает компонент «Добавить отчет», приложение запускает серию ajax-вызовов, чтобы выбрать все приложения, которые есть у пользователя, и все отчеты из этих приложений.Как только все запросы Ajax завершены, пользователь видит список отчетов, которые он может добавить.Если пользователь открывает компонент «Добавить отчет» во второй раз, у него уже есть список отчетов, и приложению не нужно отправлять больше запросов AJAX.