Angular Firebase获得ZoneAwarePromise

时间:2019-01-21 02:30:29

标签: angular firebase ionic-framework angularfire2

我正在尝试构建此功能以在应用程序的“个人资料”页面上载个人资料图像,问题是由于图片上传功能,我得到了ZoneAwarePromise。我尝试了很多不同的方法,但无法改变结果。

有人可以帮助我吗?我在做什么错了?

uploadService.ts

pictureUpload(file: any, uid: string) {
    return this.afUpload.upload('profile/' + uid, file);
}

profile.component.ts

onCreateUser() {
    const picture = this.uploadService.pictureUpload(this.fileInput.nativeElement.files['0'], currentUserID).then(
      async (data) => {
        try {
          return data.ref.getDownloadURL();
        } catch {
          console.error();
        } finally {
          const email = this.userProfileForm.value.email;
          const firstName = this.userProfileForm.value.firstName;
          const lastName = this.userProfileForm.value.lastName;

          const userObj = {
            'uid': currentUserID,
            'email': email,
            'firstName': firstName,
            'lastName': lastName,
            'picture': picture
          };

          console.log('the object is');
          console.log(userObj);

          if (this.editMode) {
            return this.db.object('profile/' + currentUserID).update(userObj).then(
              () => {
                return this.presentToaster('Dados atualizados');
              },
              (e) => {
                this.presentToaster(e);
                console.error(e);
              }
            );
          } else {
            const load = await this.loadCtrl.create({
              message: 'Criando Usuario'
            });
            await load.present();
            return this.db.object('profile/' + currentUserID).set(userObj).then(
              () => {
                load.dismiss();
                return this.navCtrl.navigateRoot('news');
              },
              (error) => {
                load.dismiss();
                this.presentToaster(error);
                console.error(error);
              }
            );
          }
        }
      },
      (error) => {
        console.error(error);
      }
    );
  }

1 个答案:

答案 0 :(得分:1)

我终于明白了。

免责声明:这是我的第一个Firebase项目,因此以下所有描述均基于我的观察。如果我在任何事情上都错了,请纠正我,我希望真正理解这一点。谢谢:)

基本上,当我收到try时,我希望得到数据,在本例中为data.ref.getDownloadURL()。因为这将是一个承诺,所以我使用了.then方法来接收“完整”数据,然后在响应中运行其他所有内容。我似乎只在那儿存在数据。

onCreateUser(uForm: FormGroup) {
    const currentUserID = this.userAuth.getCurrentUserID();
    let picture;
    this.uploadService.pictureUpload(this.fileInput.nativeElement.files['0'], currentUserID).then(
      async (data) => {
        try {
          data.ref.getDownloadURL().then(
            async (downloadURL) => {
              picture = downloadURL;
              const email = this.userProfileForm.value.email;
              const firstName = this.userProfileForm.value.firstName;
              const lastName = this.userProfileForm.value.lastName;

              const userObj = {
                'uid': currentUserID,
                'email': email,
                'firstName': firstName,
                'lastName': lastName,
                'picture': picture
              };

              if (this.editMode) {
                return this.db.object('profile/' + currentUserID).update(userObj).then(
                  () => {
                    return this.presentToaster('Dados atualizados');
                  },
                  (e) => {
                    this.presentToaster(e);
                    console.error(e);
                  }
                );
              } else {
                const load = await this.loadCtrl.create({
                  message: 'Criando Usuario'
                });
                await load.present();
                return this.db.object('profile/' + currentUserID).set(userObj).then(
                  () => {
                    load.dismiss();
                    return this.navCtrl.navigateRoot('news');
                  },
                  (error) => {
                    load.dismiss();
                    this.presentToaster(error);
                    console.error(error);
                  }
                );
              }
              //
            }
          );
        } catch (error) {
          console.error(error);
        }
      },
      (error) => {
        console.error(error);
      }
    );

  }