Typescript Angular HTTP-запрос получить только последний результат - PullRequest
Новая
       15

Typescript Angular HTTP-запрос получить только последний результат

0 голосов
/ 24 октября 2018

Каков «лучший» (распространенный) способ убедиться, что мой Angular HTTP-запрос возвращает только самые новые данные ответа.(Я использую Angulars HttpClient)

Допустим, пользователь отправляет новый запрос до того, как ответ предыдущего запроса будет возвращен.Моему бэкэнду требуется больше времени для обработки первого запроса, поэтому второй запрос возвращается раньше, чем первый -> обновляется представление get, а затем возвращается первый запрос.Теперь представление обновляется со старыми данными.Это явно не то, что я хочу.

Я нашел это решение, чтобы отменить запрос, но действительно ли это единственный путь?Есть ли какие-то встроенные функции для достижения этой цели? 

if ( this.subscription ) {
   this.subscription.unsubscribe();
}
this.subscription = this.http.get( 'myAPI' )
 .subscribe(resp => {
  // handle result ...
});

Я знаю, что есть оператор switchMap () , который возвращает только самые последние данные, но, насколько я знаю, вы можете использовать толькоэто внутри наблюдаемого.В моем случае я не наблюдаю никаких изменений ввода.Я просто вызываю функцию отправки формы с помощью директивы (ngSubmit) = "doRequest ()" в HTML-шаблоне. 

// get called on submit form
doRequest() {
 this.http.get('myAPI')
  .subscribe(resp => {
    // handle result ...
  });
}

Есть ли способ использовать оператор switchMap или у вас есть другие решения?Спасибо, что нашли время:)

PS: Конечно, в моем реальном проекте у меня есть класс обслуживания API с различными функциями, выполняющими запросы и просто возвращающими наблюдаемые ответы HTTP.Поэтому я подписываюсь на такую ​​наблюдаемую функцию doRequest ().

1 Ответ

0 голосов
/ 24 октября 2018

вы просто делаете клики / запросы потоком, который вы можете отключить ... запросы / клики пользователя - это поток событий, на которые вы можете наблюдать и реагировать. 

private requestSource = new Subject();

request() {
  this.requestSource.next();
}

ngOnInit() {
  this.requestSource.switchMap(req => this.http.get('myApi'))
                       .subscribe(response => console.log(response, "latest"));
}

современный клиентПрактическое правило программирования: все является потоком, даже если он не похож на один сразу.

...