Как я могу объединить результат 2 http звонков

Question

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

Я хочу получить данные из обоих сервисов и объединить их в один массив объектов,Мне также нужно сопоставить оба звонка по городу и штату.

Я не уверен в правильном способе сделать это.

Я пытался вызывать каждую службу отдельно и объединять данные, используя разбросоператор, но я не мог понять, как выровнять записи в каждом наборе результатов.

Я хотел бы знать, могу ли я использовать RXJS для такого слияния данных.Я ожидаю иметь 1 объект со всеми свойствами обоих вызовов

Answer 1

Использовать комбайнПоследний

combineLatest(
  http.get('cityDetailsUrl'),
  http.get('hotelsInfoUrl')
).subscribe(([cityDetails, hotelsInfo]) => {
  You have access to city details and hotel info right here
});

Метод подписки сработает после завершения обоих вызовов.

Answer 2

Вы можете использовать forkJoin тоже

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

Пример из learnrxjs

@Injectable()
export class MyService {
  makeRequest(value: string, delayDuration: number) {
    // simulate http request
    return of(`Complete: ${value}`).pipe(
      delay(delayDuration)
    );
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>forkJoin Example</h2>
      <ul>
        <li> {{propOne}} </li>
        <li> {{propTwo}} </li>
        <li> {{propThree}} </li>
      </ul>
    </div>
  `,
})
export class App {
  public propOne: string;
  public propTwo: string;
  public propThree: string;
  constructor(private _myService: MyService) {}

  ngOnInit() {
    // simulate 3 requests with different delays
    forkJoin(
      this._myService.makeRequest('Request One', 2000),
      this._myService.makeRequest('Request Two', 1000),
      this._myService.makeRequest('Request Three', 3000)
    )
    .subscribe(([res1, res2, res3]) => {
      this.propOne = res1;
      this.propTwo = res2;
      this.propThree = res3;
    });
  }
}

Answer 3

Я бы лично выбрал сначала город, когда вы получите результат, используйте информацию, указанную там, для запроса второго сервиса (например, используйте city из ответа первого сервиса в качестве параметра для инициирования второго запроса API), pesudocode:

fetch(`https://api.number.one?city=${yourcity}`)
    .then((data) => {
        return data.json();
    })
    .then((json) => {
        let result = json;
        // use result from first request to build the second one
        fetch(`https://api.number.two?city=${result.city}`)
            .then((data) => {
                return data.json();
            })
            .then((json) => {
                // here you extract the properties you need from the second API
                // and merge them with the $result variable from the first request above
                let obj = {
                    prop1: json.prop1,
                    prop2: json.prop2,
                };

                result = {
                    ...result,
                    obj
                };
            })
           .catch(err) => {

           });
    })
    .then((json) => {
    })
    .catch(err) => {

    });

было бы, конечно, более элегантно абстрагировать это в несколько функций ...

, и никакой RxJS не имеет ничего общего с наблюдаемыми и не делает никакой магииданное сращивание!