如何等待异步功能完成后再执行其他代码行

Question

我有一个上传图片的功能。我将代码放在某个服务文件中，然后在另一个调用该服务的组件中调用它。我想在上传进度成功后立即在调用服务的组件中执行另一行代码。

我已经阅读了另一个与此类似的问题。但是，我无法清楚地捕捉到答案，因为在另一个问题中，异步功能和之后的功能位于同一文件中。我有一些线索Promise和Observable。但是我不太了解如何正确使用它

这是我所提供的服务：

public changeImage = (e: any, prevImage: string, filePath: string) => {
    const file  = e.target.files[0];
    const ref   = this.storage.ref(filePath);
    const task  = this.storage.upload(filePath, file);

    this.uploadPercent = task.percentageChanges();
    task.snapshotChanges().pipe(
      finalize(() => console.log(`Finished`) )
    ).subscribe();
}

这是调用服务的组件：

public uploadImage = async (e: any) => {
    this.uploading        = true;
    await this.imageStorage.changeImage(e, this.admin.adminImage, `admin/${e.target.files[0].name}`);
    /* I want to execute code here after upload is success */
    this.uploading = false; /* executed after upload finished */
}

我该如何实现？