Angular-RxJS- 在长 API 调用中间隐藏微调器并继续 API 调用

Posted 2023-03-16

【中文标题】Angular-RxJS- 在长 API 调用中间隐藏微调器并继续 API 调用

【英文标题】：Angular-RxJS- Hide spinner in the middle of long API call and continue API call

【发布时间】：2022-01-20 15:17:16

【问题描述】：

API 调用的响应时间在 2 到 30 秒之间变化。 初始化 API 调用后，如果 API 调用需要超过 五秒，在第六秒的时候，我必须执行一些 动作（隐藏微调器），并且调用必须继续，直到它 完成。

RxJS 运算符的最佳组合是什么？

【问题讨论】：

我会看看takeUntil 和timer。

Merge with timer，见第一个例子。

【参考方案1】：

使用Rx延迟应该能够在一定时间延迟后触发动作

import  of  from 'rxjs';
import  delay  from 'rxjs/operators';

doSomething(): Observable<boolean> 
 //place your logic here 
   return of(true);
 //you can specify what type of observable to use number, string etc..

const $delayed 
  = doSomething
   .pipe(delay(6000))
   .subscribe(e => console.log(e));

【讨论】：

我们在哪里可以在第 6 秒控制隐藏微调器？ API 调用必须按原样执行，没有任何延迟或中断..

1- 您设置一个 css 类来控制微调器的可见性，然后在 doSomething 函数的 js 代码中将隐藏 css 类设置为微调器元素

以上行不通，为什么因为最初的 6 秒延迟然后调用 API 不是我想要的。 API 服务和计时器应该并行启动，我应该获得计时器回调控制，并且 API 应该继续运行直到完成。如果可能，请提供示例或可行的解决方案。

6 秒后没有人指示调用 api！该代码只是投影如何在 6 秒后延迟函数调用，将其与逻辑结合的方式完全取决于您，事实上，在您的情况下，您应该在发出 api 调用或使用 Rx 后立即调用此方法合并或加入以同时发出两个呼叫