Angular 12中如何从Service捕获API响应到Component？

你的问题出在Service的checkEmail方法没有返回异步操作的结果——你在方法内部直接调用了subscribe，但这个方法本身没有返回任何值，所以Component里用await拿到的自然是undefined。

方式一：Service返回Observable，Component订阅或转Promise #

修改后的Service代码： #

public checkEmail(emailToVerify: any) {
  // 直接返回Observable，不在Service内部订阅
  return this.myService.emailValidate({ email: emailToVerify });
}

对应的Component代码（两种使用方式）： #

方式1：直接订阅

this.myService.checkEmail(customerEmail).subscribe({
  next: (data) => {
    this.apiResponse = data;
    console.log("this.apiResponse", this.apiResponse);
  },
  error: (err) => {
    console.log('请求失败', err);
  }
});

方式2：转成Promise配合async/await

async getEmailCheckResult() {
  try {
    // Angular 12推荐用firstValueFrom替代废弃的toPromise
    this.apiResponse = await firstValueFrom(this.myService.checkEmail(customerEmail));
    console.log("this.apiResponse", this.apiResponse);
  } catch (err) {
    console.log('请求失败', err);
  }
}

// 调用这个方法触发请求
this.getEmailCheckResult();

需要先导入firstValueFrom：

import { firstValueFrom } from 'rxjs';

方式二：Service内部转成Promise返回 #

修改后的Service代码： #

import { firstValueFrom } from 'rxjs';

public async checkEmail(emailToVerify: any) {
  try {
    return await firstValueFrom(this.myService.emailValidate({ email: emailToVerify }));
  } catch (err) {
    console.log('updateEmail-err', err);
    throw err; // 抛出错误让Component处理
  }
}

对应的Component代码： #

async getEmailCheckResult() {
  try {
    this.apiResponse = await this.myService.checkEmail(customerEmail);
    console.log("this.apiResponse", this.apiResponse);
  } catch (err) {
    console.log('请求失败', err);
  }
}

// 调用方法
this.getEmailCheckResult();

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