Angular 2+: вызовы API для заполнения ‹select› и установки выбранного значения

Допустим, у меня есть две конечные точки REST API следующим образом:

Чтобы загрузить список поиска (например, местоположения): host/api/locations
для загрузки сведений о пользователе: host/api/user/1

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

Я знаю, что могу сделать это с помощью цепочки, либо используя метод подписки, либо используя плоскую карту в RxJs. Но оба они на самом деле предназначены для случаев, когда второй вызов API зависит от ответа первого. В моем случае между двумя вызовами API нет никакой зависимости, единственный сбой заключается в том, что местоположения должны быть загружены, чтобы домашнее местоположение пользователя было установлено в качестве выбранного значения.

Как лучше всего это сделать?


angular api flatmap chaining
person devC    schedule 03.07.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Здесь вам на помощь приходит оператор rxjs forkJoin. Он обязательно выдает значения, когда получен ответ от всех наблюдаемых. Вот описание с сайта rxjs

Один из распространенных вариантов использования этого — если вы хотите отправить несколько запросов при загрузке страницы (или каком-то другом событии) и хотите действовать только после получения ответа для всех. (подробная ссылка)

Ваша реализация должна быть примерно такой

      let req1$ = this.apiService.api1(); //first observable
      let req2$ = this.apiService.api2(); //second observable
      
      forkJoin(req1$, req2$).subscribe(([response1, response2])=>{
      //Your implementation shall go here.
      });

Спасибо.

person Obaid    schedule 03.07.2020
comment
Спасибо, я думаю, это то, что мне нужно. Только одно - здесь apiService возвращает наблюдения, верно? - person devC; 03.07.2020
comment
Да, точно. Также обратите внимание на стиль кодирования rxjs, если имя переменной заканчивается знаком доллара ($), это неявно означает, что это наблюдаемое :-) - person Obaid; 03.07.2020

arrow_upward
1
arrow_downward

ForkJoin будет служить вашей цели.

forkJoin — это самый простой способ, когда вам нужно дождаться разрешения нескольких HTTP-запросов.

forkJoin ожидает завершения каждого HTTP-запроса и группирует все наблюдаемые объекты, возвращаемые каждым HTTP-вызовом, в один наблюдаемый массив и, наконец, возвращает этот наблюдаемый массив.

const locations = this.http.get('host/api/locations');
const user = this.http.get('host/api/user/1');

forJoin(locations,user).subscribe(result => {
result[0]; // location
result[1]; // user
})
person Durgesh Pal    schedule 03.07.2020