从promise中返回数据并以另一种方法获取它

Question

I'm missing something on how to use async/await and probably promises methods too. Here is what I am trying to do:

login-form-component.html

<button (click)="sinInWithFacebook()">Sign In with Facebook</button>

login-form-component.ts

async sinInWithFacebook() {
  const loginResponse = await this.auth.signInWithFacebook();
  console.log(loginResponse); // it returns undefinied
}

auth.service

signInWithFacebook() {
  try {
    this.fb.login(['email'])
      .then((loginResponse: FacebookLoginResponse) => {
        const credential = firebase.auth.FacebookAuthProvider.credential(loginResponse.authResponse.accessToken);
      return <LoginResponse>{
        result: this.auth.auth.signInWithCredential(credential)
      }
    })
  }
  catch (e) {
    return {
      error: e
    }
  }

}

loginResponse will always returns undefinied when I want it to return the result object. I believe it has something to do with asynchronous methods. Can you help me out? Thanks

Answer 1

You should return the result from signInWithFacebook function:

    try {
      return this.fb.login(['email'])
        .then((loginResponse: FacebookLoginResponse) => {
          const credential = firebase.auth.FacebookAuthProvider.credential(loginResponse.authResponse.accessToken);
            return <LoginResponse>{
              result: this.auth.auth.signInWithCredential(credential)
            }
        })
    }

Answer 2

your function doesn't return anything. And the try .. catch block doesn't work that way for Promises.

signInWithFacebook():Promise<LoginResponse> {
  return this.fb.login(['email'])
    .then((loginResponse: FacebookLoginResponse) => {
      const credential = firebase.auth.FacebookAuthProvider.credential(loginResponse.authResponse.accessToken);
      //my guts tell me that `this.auth.auth.signInWithCredential` is async as well.
      //so let the promise chain deal with that/resolve that
      return this.auth.auth.signInWithCredential(credential);
    })
    .then(
      result => ({ result }),
      error => ({ error })
    );
}