Angular 9 和 rxjs - 在 postMessage 之后等待消息事件

Question

我是 rxjs 的新手，不知道如何实现以下逻辑。任何建议将不胜感激。

背景

我将使用 postMessage 实现主机网站和其中的 iframe 之间的通信。由于 postMessage 只是单向的，我想实现当消息从主机网站发送到 iframe 时自己等待“响应”的逻辑。

我有一个名为 send(message) 的同步函数来调用 postMessage 将消息发送到 iframe。然后我想要另一个具有以下逻辑的功能。

public async sendAndWait(message): Promise<responseObj> {
    // 1. create an observable to wait to message event with timeout

    // my first thought is as follow but I feel like it does not work
    // fromEvent(window, 'message')
    //  .pipe(timeout(timeoutInMs))
    //  .subscribe(event => {
    //    console.info(event);
    //  });

    // 2. run `send(message)` function

    // 3. do not finish this function until timeout or receive event in the previous subscription.
}

当我使用该功能时，我想拥有

let response = await sendAndWait(message);

不确定是否可以实施？谢谢

Answer 1

您不能在 JS 中停止代码执行（使用Async-Await，会在后台返回一个Promise 对象。这样代码就不会等待）

考虑通过以下方式实现它：

let response: responseObj;

function main(): void {
  sendAndWait(MESSAGE_OBJECT).subscribe(x =>  response = x)
}

function sendAndWait(message): Observable<responseObj> {
  send(message)
  return fromEvent(window, 'message')
    .pipe(
      timeout(timeoutInMs),
      first()
    )
}

或者选择返回Promise:

async function sendAndWait(message): Promise<void> {
  send(message)
  const response = await fromEvent(window, 'message')
    .pipe(
      timeout(timeoutInMs),
      first(),
      toPromise()
    )
}