Angular 10：ngOnInit 两个承诺

Question

我目前正在尝试在我的 Angular 应用中实现与 Strava API 的连接。

快速恢复：

1. 用户单击按钮以连接到 Strava
2. 它被重定向到 Strava 进行身份验证（使用 PKCE）
3. Strava 使用代码重定向到我的应用
4. 在 ngoninit 中，我正在检查路由参数，如果我有代码，我会启动两个链接的 Promise：第一个是从 Strava 获取访问令牌，然后记录到 DB(Firebase)。

问题是有时数据会记录在 firebase 中，有时则不会。这种行为不是系统的。奇怪的是，我每次都进入我的 postNewToken，因为控制台会记录它。

• 如果我只是在 ngOnInit() 中记录到 firebase（没有 strava 令牌请求），它会在 100% 的情况下创建。
• 如果我有一个按钮可以启动令牌请求并记录到 Firebase，它似乎每次都能正常工作。

我不知道如何解决它。这似乎更像是将承诺链接到 ngOnInit 的问题，但我什至不知道如何绕过它。

我的组件中的代码：

  ngOnInit() {
        const stravaCode = this.route.snapshot.queryParamMap.get('code');
        if (stravaCode !== undefined) {
          this.stravaService.handleStravaAuthorizationCode(stravaCode);
}

并在服务中关联：

 // Handle Strava Code received
 handleStravaAuthorizationCode(authorizationCode: string) {
     this.getStravaToken(authorizationCode).then(res => {
       this.postNewToken(res).then(res => {
         this.router.navigate(['encoding']);
       });
     });
 }

 // Get Strava access token to make the requests to the API -> only done once
 getStravaToken(authorizationCode: string){
   if (authorizationCode !== undefined){
     console.log('Authorization code: ' + authorizationCode);

     const data = {
       client_id: environment.strava.client_id,
       client_secret: environment.strava.client_secret,
       code: authorizationCode,
       grant_type: 'authorization_code'
     };

     return this.http.post<StravaToken>(this.stravaTokenURL, data)
     .pipe(catchError(this.errorService.handleHttpError)).toPromise();
   }
 }

 postNewToken(stravaToken: StravaToken) {
   if (this.authService.isLoggedIn) {
       console.log('Recording strava token into Firebase');
       console.log(stravaToken);
       return this.afs.collection('strava_tokens')
       .add(stravaToken).then(res => console.log(res), err => console.log(err));
   } else {
       return Promise.reject(new Error('No User Logged In!'));
   }
 }

Answer 1

终于，我明白了。 我只是没有等待建立与 firebase 的连接。因此，我无法发布任何新数据，因为我没有经过身份验证。