javascript - 发送 API 调用，观察一个特定的值，如果值发生变化，再次调用

Question

我有一个调用客户端并获取数据并返回它的函数：

       const remoteConnection = await
          this.client.connectionStatus(chassi, number, language) || [];
        return {
          data: remoteConnection as RemoteInfo,
          read: new Date()
        };

响应将采用以下形式：

 {
   connectionStatus: "",
   online: ""
 }

connectionStatus 可以有三种状态：

'disconnected'
'pending'
'connected'

我想调用我的 API 并发送数据。如果“connectionStatus”为“待处理”，我想每 5 秒调用一次 API 以检查它是否更改为“已连接”。在这种情况下，我想用新值再次返回数据。

简而言之：

进行 API 调用并返回数据。如果返回数据中的 'connectionStatus' 等于 'pending'，则每 5s 进行一次新调用以检查 'connectionStatus' 是否等于 'connected'。如果为真，则再次返回数据。

怎么做？

标签： javascripttypescriptrxjs

Answer 1

您可以使用timer触发进行 api 调用，并takeUntil在状态满足您的条件时使用停止：

const data$ = timer(0, 5000).pipe(
  concatMap(() => client.connectionStatus()),
  takeWhile(resp => resp.connectionStatus === 'pending', true),
  map(data => ({ data, read: new Date() }))
);

这是流程：

• timer立即发射，然后每 5 秒发射一次
• concatMap调用你的方法并发出 promise 的结果
• takeWhile满足条件时导致流完成
• map只需将RemoteInfo响应转换为您想要的形状

只需订阅此 observable 即可触发执行并接收排放：

data$.subscribe();

这是StackBlitz示例。

如果 observable 将有多个订阅者，您可能希望通过利用操作符来防止多次单独调用您的 api share，这将导致所有订阅者共享相同的订阅：

const data$ = timer(0, 5000).pipe(
  concatMap(() => client.connectionStatus()),
  takeWhile(resp => resp.connectionStatus === 'pending', true),
  map(data => ({ data, read: new Date() })),
  share() // <---
);