Отмените подписку / отмените существующие вызовы HTTP / XHR в angular 4, если они уже выполняются с тем же запросом - PullRequest
Новая
       42

Отмените подписку / отмените существующие вызовы HTTP / XHR в angular 4, если они уже выполняются с тем же запросом

0 голосов
/ 01 сентября 2018

Постановка задачи: В настоящее время у меня есть приложение внешнего интерфейса, в котором имеется 5 графиков на странице (каждый график имеет свою конечную точку для извлечения данных), которые должны отображаться на основе данных, извлеченных из базы данных, и у меня есть раскрывающийся список, который обновляет графики, основанные на значении, выбранном из раскрывающегося списка.

Теперь во внешнем интерфейсе графики будут загружены со значениями по умолчанию, и мое требование заключается в том, чтобы каждый раз, когда пользователи выбирали какие-либо выпадающие списки и если выполнялись какие-либо HTTP-вызовы (из значений по умолчанию), я хотел отменить их и сделать новый запрос (основная причина потому что иногда данные из предыдущего запроса занимают больше времени, чем последние данные, которые выбираются из раскрывающегося списка, поэтому мои графики все еще обновляются старым запросом, а не новым значением, выбранным из раскрывающегося списка, как я мог видеть на вкладке Chrome Network, Старый запрос завершается после последнего запроса, следовательно, граф обновляется старым запросом), и все эти графики делают параллельный запрос к этим методам для визуализации данных.

С помощью @Amit Chigadani в настоящее время у меня есть следующая функция, написанная в сервисе, но при таком подходе конечные точки даже самого последнего запроса отменяются, а графики вообще не отображаются , можете ли вы помочь я с подхода

В службе 

getData(url: string) {
    const finalRequest = new RequestModel(this.myModel);
    const body = JSON.stringify(finalRequest);
    const headers = new Headers({ "Content-Type": "application/json" });
    const options = new RequestOptions({ headers: headers });

    return this.http.post(url, body, options).switchMap((res) => {
        const resp = res.json();
        return Observable.of(resp);
    });
}

В компоненте 

public mySub: Subscription;

if (this.mySub !== undefined) {

    this.mySub.unsubscribe();
}

this.mySub = this.myService.getData(this.url).subscribe((data) => {
    try {
    }
    catch (err) {//do something if error
    }
    return this.mySub;
});

Версия

  • Угловой: 4.0.1
  • rxjs: 5.0.3

1 Ответ

0 голосов
/ 01 сентября 2018

Хорошо, забудьте о switchMap, который здесь бесполезен.

Из чата:

Я понял, что проблема в основном потому, что у меня разные дочерние компоненты, которые параллельно делают вызов этого метода, и у меня есть Одна и та же подписка для всех графиков, следовательно, каждый раз, когда приходит новый запрос отписаться от запросов .. Есть ли способ решить этот из

Я вижу, что вы вызываете один и тот же метод для каждого http запроса. Я предполагаю, что вы делаете это в своем parent component всякий раз, когда один из child испускает раскрывающееся значение Change event.

РЕДАКТИРОВАТЬ :

Из чата Было ясно, что OP на самом деле означает parent-child компоненты в терминах inheritance, а не angular context.

т.е. Child1, Child2... классы расширяются от Parent

Таким образом, каждый из этих Child компонентов теперь будет иметь отдельный экземпляр mySub Subscription object, который может быть подписан параллельно. И unsubscribing из предыдущего запроса от одного из дочерних компонентов не должен unsubscribe экземпляров из других child компонентов.

Только если тот же компонент, скажем, Child1 запускает второй http запрос, тогда его собственный предыдущий subscription будет уничтожен, а новый subscription будет создан в child1 экземпляре.

См. Эту демонстрационную версию , чтобы проверить, что instances не используется совместно для child компонентов. Все они независимы.

...