Firebase 函数仅在 return 语句内运行答案

【问题标题】：Firebase function only runs if inside return statementFirebase 函数仅在 return 语句内运行
【发布时间】：2021-09-22 18:52:10
【问题描述】：

我正在运行一个将图像上传到 Firebase 并将数据设置给其各自用户的函数：

import { Component, OnInit } from '@angular/core';
import { AngularFirestoreDocument } from '@angular/fire/firestore';
import { FbUser } from 'src/app/common/fb-user';
import { AuthService } from 'src/app/services/auth.service';
import { NgxImageCompressService } from 'ngx-image-compress';

@Component({
  selector: 'app-profile-info',
  templateUrl: './profile-info.component.html',
  styleUrls: ['./profile-info.component.scss']
})
export class ProfileInfoComponent implements OnInit {

  constructor(
    public _auth: AuthService
  ) { }

  ngOnInit(): void {

  }

  currentImageUrl: string = "";

  async uploadPicture(e: any) {
    const file = e.target.files[0]
    const filePath = this._auth.userData.uid
    const task = await this.uploadImage(filePath, file)

    if (task) {
      //Promise.resolve().then(() => window.location.reload())

      this.currentImageUrl = await this._auth._afstg.ref(task).getDownloadURL().toPromise();

      const userRef: AngularFirestoreDocument<any> = this._auth._afs.doc(`users/${filePath}`);
      const userData: FbUser = {
        uid: filePath,
        email: this._auth.userData.email,
        displayName: this._auth.userData.displayName,
        photoURL: this.currentImageUrl,
        emailVerified: this._auth.userData.emailVerified
      }
      return userRef.set(userData, {
        merge: true
      })
      alert("Image uploaded succesfully")
      window.location.reload()
    } else {
      alert("Error when uploading image, try again")
    }
  }

  async uploadImage(uid: string, file: any): Promise<string> {
    const fileRef = this._auth._afstg.ref(uid).child("profile-picture");

    // Upload file in reference
    if (!!file) {
      const result = await fileRef.put(file);

      return result.ref.fullPath;
    }
    return ""
  }

我的问题是，如您所见，在返回函数之后我有一个警报和一个 reload()，我尝试在没有返回函数的情况下运行 userRef.set，但它不起作用，唯一的工作方式是如果它在退货中，现在我在修改数据后无法刷新页面，有什么想法为什么或如何在退货后重新加载？已经尝试过 try-finally 和 Prosimes.resolve，都没有成功。

【问题讨论】：

return 关键字总是跳出函数。

标签： javascript angular typescript firebase

【解决方案1】：

我使用 try-catch 和 await 修复了它：

  currentImageUrl: string = "";

  async uploadPicture(e: any) {
    const file = e.target.files[0]
    const filePath = this._auth.userData.uid
    const task = await this.uploadImage(filePath, file)

    if (task) {
      //Promise.resolve().then(() => window.location.reload())

      this.currentImageUrl = await this._auth._afstg.ref(task).getDownloadURL().toPromise();

      const userRef: AngularFirestoreDocument<any> = this._auth._afs.doc(`users/${filePath}`);
      const userData: FbUser = {
        uid: filePath,
        email: this._auth.userData.email,
        displayName: this._auth.userData.displayName,
        photoURL: this.currentImageUrl,
        emailVerified: this._auth.userData.emailVerified
      }
      try {
        await userRef.set(userData, {
          merge: true
        })
      } catch (error) {
        console.error("Error modifying user document", error);
      }
      alert("Image uploaded succesfully")
      window.location.reload()
    } else {
      alert("Error when uploading image, try again")
    }
  }

  async uploadImage(uid: string, file: any): Promise<string> {
    const fileRef = this._auth._afstg.ref(uid).child("profile-picture");

    // Upload file in reference
    if (!!file) {
      const result = await fileRef.put(file);

      return result.ref.fullPath;
    }
    return ""
  }

【讨论】：