此方法如何返回可由调用方方法订阅的Observable

Question

我不太喜欢Angular和RxJS，我正疯狂地尝试订阅Observable。

这是我的代码：

createUser(user, file) {
console.log(user);
if (user.password != user.password_confirmation) {
let passwordError: any = new Object();
passwordError["message"] = "Inserted password and inserted password confirmation are different";
this.eventAuthError.next(passwordError);
}
else {
this.afAuth.auth.createUserWithEmailAndPassword(user.email, user.password)
.then(userCredential => {
console.log("INTO THEN !!!")
this.newUser = user;
console.log(userCredential);
userCredential.user.updateProfile({
displayName: user.firstName + ' ' + user.lastName
});
console.log("PROFILE UPDATED !!!");
this.uploadFileIntoFirebaseStore(file);
})
}
}
uploadFileIntoFirebaseStore(fileToBeUploaded) {
var n = Date.now();
const filePath = `user_avatar/${n}`;
const fileRef = this.storage.ref(filePath);
return this.storage.upload(`user_avatar/${n}`, fileToBeUploaded)
.snapshotChanges().subscribe(refStatus => {
console.log("FILE REF: ",
fileRef.getDownloadURL().subscribe(urlStr => console.log("URL STR:", urlStr)));
return fileRef.getDownloadURL();
})
}

正如您所看到的，createUSer((方法是我在Firebase上创建新用户的入口(基本上我必须通过电子邮件和密码创建用户，将图像文件(来自我的自定义用户注册表单页面(保存到Firebase Storage中，然后在FireStore中创建一个新对象(但这在本代码中目前尚未实现(。

正如您在我的createUser((方法末尾所看到的，我正在通过以下方式执行我的uploadFileIntoFirebaseStore((方法：

this.uploadFileIntoFirebaseStore(file);

这样可以很好地将文件正确插入Firebase存储。

这里发生了一件我无法理解的事情。

如何看待这种方法，我只是订阅应用于存储上传的snapshotChanges((结果；触发的"；当我的文件上传完成时。我将返回fileRef.getDownloadURL((，这是一个Observable文件，我可以在上传完成时使用它来检索上传文件的URL。

好的，现在我必须将这个值(上传文件的URL(检索到以前的createUser((方法中(该方法称之为uploadFileIntoFirebaseStore((法(，所以我尝试更改它：

this.uploadFileIntoFirebaseStore(file);

这个：

this.uploadFileIntoFirebaseStore(file).subscribe( bla => console.log("DO SOMETHING"));

这里我有一个问题：我不能订阅这个方法。我想是因为我将Observable返回到内部箭头函数中，但我的方法什么也不返回。

如何修复这种情况，使uploadFileIntoFirebaseStore((返回一个Observable，该Observable可以派生到createUser((法中？

还是我没有抓住要点，我的推理是错误的？

Answer 1

.subscribe是Observable的一个方法。

this.storage.upload(`user_avatar/${n}`, fileToBeUploaded).snapshotChanges()

以上返回Observable，因此您可以使用subscribe。

但是：

this.storage.upload(`user_avatar/${n}`, fileToBeUploaded).snapshotChanges().subscribe()

上面返回的是Subscription，而不是Observable，因此您无法订阅。

Subscription是一个表示一次性资源的对象，通常是Observable的执行。

https://rxjs-dev.firebaseapp.com/guide/subscription

解决方案

您可以使用.pipe和switchMap运算符来处理snapshotchanges的Observable对象的结果。

return this.storage.upload(`user_avatar/${n}`, fileToBeUploaded)
.snapshotChanges()
.pipe(
switchMap(refStatus => fileRef.getDownloadURL())
);

https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap