带有角度/离子的云函数firebase调用无法获得结果，但可以使用curl

Question

我正在为一个类项目开发一个小型应用程序，我必须在其中从 firebase 获取一些用户数据。为此，我选择使用云功能来检索所有用户。这是我的函数的代码。

import { Request, Response } from 'express';
const functions = require('firebase-functions');
const admin = require('firebase-admin');
import * as cors from 'cors';
const corsHandler = cors({origin: true});

admin.initializeApp();

const getAllUsers = (req: Request, res: Response) => {
  corsHandler(req, res, () => {
    const maxResults = 1000; // optional arg.
    const allUsers: any = {'email': [], 'uid': []};
    admin.auth().listUsers(maxResults).then(
      (userRecords: { users: any[]; }) => {
        userRecords.users.forEach(userRecord => {
          // For each user
          allUsers['email'].push(userRecord.email);
          allUsers['uid'].push(userRecord.uid);
        });
        return res.status(200).send(JSON.stringify(allUsers));
      }).catch((error: any) => {
        console.log("Error listing users:", error);
        return res.status(500).send(error);
      });
  })
}

module.exports = {
  api: functions.https.onRequest(getAllUsers),
};

问题出在角度方面，我试图得到这个函数的结果，如果我使用 curl，没问题我得到了我需要的所有信息。但是当我使用角度服务时，它陷入了无限循环。这是我的代码：

<p> {{ this.authService.getAllUsers() | async }}  </p>

在我的 html 文件中，我只想在我的服务中打印结果：

  import { functions, auth } from 'firebase';

  getAllUsers(): Promise<any> {
    //return this.http.get('https://XXX.cloudfunctions.net/api').toPromise();
    return functions().httpsCallable('getAllUsers')();
  }

正如你所看到的，我应该从这两个结果中得到一个承诺，所以我不知道无限循环可能来自哪里。 在控制台中我没有看到任何错误...

感谢您的帮助！

Answer 1

在您的 auth.service.ts 代码中试试这个：

getAllUsers(): Observable<any> {
  return this.http.get('https://XXX.cloudfunctions.net/api');
}

在你的组件 ts 中：

  allUsers$: Observable<any>;

  ...

  ngOnInit() {
    this.allUsers$ = this.authService.getAllUsers();
  }

在您的组件模板中：

<p> {{ allUsers$ | async }}  </p>

async 管道将自动订阅 allUsers$ observable，并将 HTTP GET 请求获取到您的 Cloud function。

重要提示：切勿在模板中使用函数，尤其是async 管道。

由于检测系统的变化，Angular 需要执行函数来知道其结果是否发生了变化。

如果函数返回 Observable 有延迟（例如 http 请求），Angular 将通过 async 管道订阅它，并在结果到来时触发新的时间更改检测以重绘组件，这将通过函数创建一个新的 observable... 因此无限循环。

参见例如this question。

改进建议（与问题没有直接关联）：

此外，最好输入您的回复，例如：

getAllUsers(): Observable<ApiResponse> {
  return this.http.get<ApiResponse>('https://XXX.cloudfunctions.net/api');
}