捕获从服务到组件的 Angular API 响应答案

【问题标题】：Capture Angular API response from service to component捕获从服务到组件的 Angular API 响应
【发布时间】：2022-11-16 16:36:04
【问题描述】：

在我的 Angular 12 应用程序中，我在服务文件中进行 API 调用，并希望在我的组件中捕获 API 的响应。但是由于 API 响应是异步的，下面的控制台总是返回 undefined。我也尝试过异步等待。这是我尝试过的：

内部服务：

public checkEmail(emailToVerify: any) {
    this.myService.emailValidate({ email: emailToVerify }).subscribe({
      next: (data: { result: any) => {
        console.log('updateEmail-res', data);
        return data;
      },
      error: (err: any) => {
        console.log('updateEmail-err', err);
      }
    });
  }

内部组件：

this.apiResponse = await this.myService.checkEmail(customerEmail);
 console.log("this.apiResponse", this.apiResponse)

【问题讨论】：

关于这个主题有一个强大的指南：angular.io/guide/http
您的服务不返回任何内容。返回订阅无关紧要。订阅应该在组件内，您可以将订阅内的数据分配给组件字段。

标签： javascript angular typescript

【解决方案1】：

在组件中

validateEmail = async () => {
    const params = {
      emailAddress: 'test@gmail.com',
    };
    const apiResponse: boolean = await this.emailService.validateEmail(params);
    console.log(`apiResponse===`, apiResponse);
  };

在职

export class EmailService {
  constructor() {}

  validateEmail = async (params: {
    emailAddress: string;
  }): Promise<boolean> => {
    return new Promise((resolve) => {
      const isValid = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(
        params.emailAddress
      );

      resolve(isValid);
    });
  };
}

【讨论】：

【解决方案2】：

checkemail 方法什么都不做。如果您已经有电子邮件验证，为什么要把它放在另一种方法中？只有一封电子邮件 Validate 而不是 checkEmail

this.apiResponse = await this.myService.emailValidate({ email: customerEmail});
 console.log("this.apiResponse", this.apiResponse)

o 在你的组件中：

this.myService.emailValidate({ email: customerEmail}).subscribe({
          next: (data: { result: any) => {
            console.log('updateEmail-res', data);
             this.apiResponse = data;
          },
          error: (err: any) => {
            console.log('updateEmail-err', err);
          }
        });

【讨论】：