Angular 在服务完成后运行一些代码以上传文件

Question

我有这个服务功能，用于将文件上传到 Firebase 存储。 它接收一组文件并上传其中的每个文件。 它还会更新每个文件的加载状态，并在上传时填写文件的'url'。

所以，我的 component.ts 看起来像

files: [{name: 'file1', uploaded: false, url:''}, {name: 'file2', uploaded: false, url:''} ];

...

constructor( private myService: FirebaseService) { }

...

this.myService.uploadImgToFirebase(this.files);

问题是，我需要在我的组件中运行一些代码（类似于 this.SOME_ITEM.files = this.files ）但就在 ALL 文件是已上传。

this.myService.uploadImgToFirebase(this.files);

// THINGS I NEED TO DO WHEN ALL THE FILES WERE UPLOADED

我怎样才能做到这一点？

Answer 1

Assuming 您正在拨打http 电话，该电话将返回您可以订阅的observable。

this.myService.uploadImgToFirebase(this.files).subscribe(m => {
   //Do your operations here once its done.
});

你可以看async/await

async function turnYourFunctionAsync() {
  return 100;
}

turnYourFunctionAsync().then(alert); // 100

另一个简单的异步/等待：

async function turnYourFunctionAsync() {
    let promise = new Promise((res, err) => {
        setTimeout(() => res("The file upload operation is complete"), 1000)
    });

    let response = await promise; 

    alert(response); 
    }
};

turnYourFunctionAsync();