使用不同的有效负载优化对同一端点的API调用

如何解决使用不同的有效负载优化对同一端点的API调用

我目前在大型Angular项目中面临API问题。我正在使用rxjs 6，并且有一个API可以计算多个日期和城市的产品价格。

此API是从多个组件中调用的，并且在特定路径上，随着用户更改日期选择，它会从3-4个组件中调用。

此API在服务内部，并执行成本计算。在响应时，前端逻辑将费率分解为所需的组件（税，附加服务成本等），并更新组件中的其他订阅的值。

我面临的问题是用户快速选择日期，使用不同的有效负载触发了多个调用，但是我想在用户开始新选择时取消较旧的API调用。

有没有办法做到这一点？我尝试存储回调，但会取消导致错误更新的随机调用。

由于代码很大，我无法发布代码。

为了更好地理解：

考虑组件A和B，服务C。 A显示城市和每个城市的成本。 B是允许用户选择日期的日历。 C计算成本并更新一些变量，这些变量已在组件A和B中订阅。

当用户在组件B中选择日期时，将为组件A中的所有城市调用成本API。因此，如果用户快速选择多个日期，则会调用很多API。这会导致成本差异，尤其是在网络不稳定的情况下。较旧的API响应有时会替换并显示错误的费用。

解决方法

您想使用switchMap取消以前的HTTP调用，并且想使用debounceTime在基础值快速变化时仅触发一次API调用。

例如

combineLatest([trigger1$,trigger2$]).pipe(
   debounceTime(250),switchMap(values => this.http.post(url,values))
).subscribe(response => console.log(response)

trigger1 $，trigger2 $可以是您将.next()值插入其中的“主题/行为主题”。

例如，您可以拥有

const date$ = new Subject<Date>();
const query$ = new Subject<string>();

，这些便是您触发HTTP调用的条件。