Angular 6 - обрабатывать несколько повторяющихся вызовов API

Question

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

Проблема

Допустим, у меня есть 20 заказов, которые будут отображаться в таблица, некоторые из которых размещены одними и теми же клиентами. Итак, давайте предположим, что 8 клиентов могли разместить эти 20 заказов. В идеале я должен сделать 8 вызовов API, чтобы получить 8 имен. Поскольку код logi c обрабатывается с использованием *ngFor, выполняется 20 вызовов API. Как я могу сделать так, чтобы было только 8 вызовов?

Что я пробовал

Я пытался сохранить имена в сеансе на стороне клиента и делать вызовы API только в том случае, если это не так. существовать в сессии. Проблема с этим логом c заключается в том, что все 20 потоков вызовов API инициируются до того, как в сеансе сохраняется первый ответ.

Требуется помощь.

Answer 1

Вы не показывали никакого кода, поэтому я собираюсь предположить, что у вас есть массив из объектов двадцати порядков, по крайней мере, с такими полями:

export interface Order {
  orderId: string;
  clientId: string;
  // Add other stuff as needed
}

Тогда в вашем распоряжении это и вы назначаете его в вашем subscribe обработчике.

orders: Order[];

Хорошо, хорошо.

Я бы определил уникальные значения clientId, используя это:

const clientSet = new Set(this.orders.map(order => order.clientId));
const clientIds = [...clientSet];

Строка 1 создает новый массив, содержащий только значения clientId (используя функцию map), и использует его для создания нового объекта Set.

Строка 2 превращает этот Set в новый массив, который будет содержать только уникальные значения.

После всего этого я хочу кое-что упомянуть об этом и производительности.

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

Answer 2

Грубая неполированная идея: при получении списка заказов с идентификаторами клиентов вы можете создать в компоненте локальный словарь (наблюдаемых) имен клиентов:

interface CustomerDictionary {
    [key: string]: Observable<string>;
}

//...
customerDictionary: CustomerDictionary = {}

Собрать все идентификаторы клиентов в таблицу, и заполните словарь запросами

collectedCustomerIDs.forEach(
    id => this.customerDictionary[id] = receiveCustomerNameFromAPI(id).pipe(shareReplay(1))
);

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

Использовать его в шаблоне с помощью customerDictionary[id] | async.