Объединить разные данные в ответ на 2-запрос

Question

Я создал Service в angular, который запрашивает услуги или web-API, которые имеют 2 method, например:

query(state: any, url: string, param?: any): void {

    url = this.baseUrl + url;
    this.isBusy.value = true;
    this.fetch(url, state, param)
        .subscribe((x) => {
                this.isBusy.value = false;
                this.view = x;
            }
        );
}

fetch(url: string, state: any, param?: any): Observable<GridDataResult> {
    state.dontShowSnak = true;


    let params = new HttpParams();
    if (param != null) {
        params = params.append('param', param);
    }
    return this.http
        .post(url, state, {params: params})
        .map(response => (<GridDataResult>{
            data: response['result']['items'],
            total: parseInt(response['result']['totalCount'], 10)
        }));
}

Этот сервис является глобальным, и все приложения работают с ним.

сейчас! У меня есть страница с 4 вкладками. когда страница запускается, загружается первая вкладка. Если я изменю вкладку и перейду на вторую вкладку (до того, как получу ответ первой вкладки), во второй вкладке у меня будет ответ или данные первой вкладки. Почему?

в чем проблема? проблема в kendo? или мой service?

• Я работаю с Kendo-grid

Но теперь я изменяю service и создаю 4 separate service для вкладки 4, и у меня нет этой проблемы. все данные верны, даже если я поменяю вкладку, прежде чем получить ответ последней вкладке.

Answer 1

Вы можете использовать switchMap вместо map на http.post(). Это уничтожит текущий запрос (инициированный из tab1) и создаст новый Observable для отправки на вторую вкладку. Теперь вы можете получить данные только для второй вкладки.

import { switchMap } from 'rxjs/operators';

fetch(url: string, state: any, param?: any): Observable<GridDataResult> {
    ......................
    return this.http
        .post(url, state, {params: params})
        .switchMap(response => { // using switchMap
            return Observable.of ({   
                data: response['result']['items'],
                total: parseInt(response['result']['totalCount'], 10)
            }) as Observable<GridDataResult>;
           }));
}