如何让FetchJoke执行完成后再运行openDialog？await后变量未定义

问题核心是fetchJoke没有返回Promise，导致await无法正确等待异步操作完成。subscribe属于RxJS的异步订阅逻辑，不会阻塞代码执行，所以即便加了await，openDialog仍会在randomJoke赋值前运行。

方法1：将Observable转为Promise（推荐） #

使用RxJS的firstValueFrom（RxJS 7+）或toPromise（RxJS 6及以下），把API请求的Observable转换成Promise，让await能等待异步操作完成。

修改fetchJoke函数：

// RxJS 7+ 先导入操作符
import { firstValueFrom } from 'rxjs';

async fetchJoke(query: string): Promise<void> {
  // 把Observable转为Promise，等待请求完成
  const data = await firstValueFrom(this.apiService.randomJoke(query));
  this.randomJoke = data;
  console.log(this.randomJoke + "varinside"); // [Object object]
}

如果使用RxJS 6及以下版本，改用toPromise：

fetchJoke(query: string): Promise<void> {
  return this.apiService.randomJoke(query).toPromise().then(data => {
    this.randomJoke = data;
    console.log(this.randomJoke + "varinside"); // [Object object]
  });
}

此时getrandomJoke中的await就能正常生效：

async getrandomJoke(query: string) {
  await this.fetchJoke(query);
  console.log(this.randomJoke + "var"); // 此时已完成赋值
  this.openDialog();
}

方法2：手动封装Promise #

若不想依赖RxJS的转换方法，可手动在fetchJoke中创建Promise，在订阅回调里标记异步操作完成：

fetchJoke(query: string): Promise<void> {
  return new Promise((resolve) => {
    this.apiService.randomJoke(query).subscribe(data => {
      this.randomJoke = data;
      console.log(this.randomJoke + "varinside"); // [Object object]
      resolve(); // 通知Promise已完成
    });
  });
}

这样await this.fetchJoke(query)会等待randomJoke赋值完成后，再执行后续的openDialog。

内容的提问来源于stack exchange，提问作者OnceUponATime