使用路由解析器解决页面加载的承诺答案

【问题标题】：Resolving Promise on Page Load using route resolver使用路由解析器解决页面加载的承诺
【发布时间】：2022-02-15 21:56:07
【问题描述】：

我正在使用 AngularFireAuth 模块通过路由解析在页面加载时将当前用户的 UID 获取到组件，但是将未包装的承诺返回给组件所需的代码行似乎没有解决并留下承诺未完成。

edit-profiles 模块的相关路由模块代码：

const routes: Routes = [
  {
    path: '',
    component: EditProfilesComponent,
    resolve: { userUID: UserInfoService },
  },
];

解析器服务代码如下：

export class UserInfoService implements Resolve<any> {
  constructor(public afAuth: AngularFireAuth, public af: AngularFirestore) {}

  async resolve() {
    const user = await this.afAuth.currentUser;
    const userUID = user?.uid;
    return userUID; //returns undefined 
  }
}

我也尝试过让它成为一个承诺并解决它，但它也返回未定义。代码如下所示：

const promise = new Promise(async(resolve, reject) => {
const user = await this.afAuth.currentUser
const userUID = user?.uid;
resolve(userUID) 

})

然后EditProfiles消费者组件代码为：

export class UserInfoService implements Resolve<any> {
  constructor(public afAuth: AngularFireAuth, public af: AngularFirestore) {}

  async resolve() {
    const user = await this.afAuth.currentUser;
    const userUID = user?.uid;
    return userUID; //returns undefined 
  }
}

我真的不确定如何实现，以便 promise 返回要由该组件使用和消费的 userUID，并显示用户特定的数据，但我不确定如何确保它在组件被实例化。

【问题讨论】：

所以，this.afAuth.currentUser 是一个 Promise 对，它是如何定义的 - 你能确认 const user 是未定义的还是 null
@Bravo 用户将登录并从 firebase Auth 分配一个 userUID，这只是获取该 UID 的问题
这不是我问的...让我分解一下... 1. this.afAuth.currentUser 是一个 Promise，2. 如果它是一个 Promise，这个 Promise 是如何创建的（即， e. 代码，而不是概念），如果它不是 Promise，那么你做错了什么
@Bravo 是的，这是一个承诺，它返回 null。我不确定你的意思是如何创建承诺，但我会尝试一下，当你调用 this.afAuth.currentUser 时，你可以在该语句之前等待并访问该对象的属性，或者您可以使用以下语法 '''const userUID = this.af.currentUser.then((user) => {return user?.uid})。不确定我是否完全理解您的要求，但如果您需要更多说明，我很乐意提供。
你一直在展示你是如何使用这个属性的，而不是它是如何创建的......所以，你能不能在你的 console.log(this.afAuth.currentUser) 和 console.log(user) 函数中添加一些调试功能 - 我我猜前者不会是一个承诺和/或后者将是 null 或 undefined 或者不会有 uid 属性......你知道，基本调试的东西

标签： javascript angular promise

【解决方案1】：

@Bravo 是对的，这是代码设计的问题，事实证明我真正想要的是让页面等到承诺解决后再打印出数据，所以 ngOnInit 上需要的内容如下代码

ngOnInit(): void {
    this.afAuth.authState.subscribe((user) => {
        if(user) {
            //write logic here to make sure the promise gets resolved
        } else {
            //logic for when the page is getting the information
        }
    })
}

这是您确保从 firebase 发送的承诺得到解决的方法，您订阅 authstate observable，当该 observable 返回 true 时，您最终可以从 firebase 检索您需要的信息，这是我的关键部分错过了事实证明路由解析器可能不是最好的工具。

【讨论】：