需要在Angular 8中对同一个端点进行多个异步调用

Question

我有一个get调用，它只接受一个搜索号码并返回结果。我有一个要求，我需要使用相同的GET呼叫搜索多个号码。我知道这可以通过使用POST呼叫打开新端点来实现，但不幸的是，我必须使用现有的GET呼叫。

我将循环array并对我在多个号码列表中的每个号码进行呼叫。

我想知道为每个号码拨打电话的最佳方式是什么，一旦一个号码的结果可用，就更新UI，而不是等待所有呼叫完成?

这是我的GET呼叫

searchNumbers(
Request: string, type: string) {
const requestOptions = {
headers: this.headers
};
const url = `${environment.customerApiUrl.status}?${type.toLowerCase()}=${Request}`;  
return this.httpClient.get(
url, requestOptions );
}

当我从号码列表中收到任何特定号码的数据时，异步调用该端点并更新UI的最佳方法是什么?

Answer 1

要做到这一点，您可以使用from创建一个可观察流，该流单独发出每个数组元素。然后使用mergeMap将每个值映射到api调用(返回可观察对象)，并将它们的输出合并到创建的流中:

searchMultipleNumbers(numbers: number[]) {
return from(numbers).pipe(
mergeMap(id => this.httpClient.get(`url/${id}`))
);
}

调用的输出响应将在它们返回时单独发出。

这是一个工作的StackBlitz。

如果您想在每次响应返回时释放所有结果的完整数组，您可以使用scan来释放所有释放的数组。

searchMultipleNumbers(numbers: number[]) {
return from(numbers).pipe(
mergeMap(id => this.httpClient.get(`url/${id}`)),
scan((all, val) => [...all, val], [])
);
}

(StackBlitz # 2)要捕获并忽略错误，您可以使用catchError并只返回EMPTY:

searchMultipleNumbers(numbers: number[]) {
return from(numbers).pipe(
mergeMap(id => this.httpClient.get(`url/${id}`).pipe(catchError(()=>EMPTY))
);
}