我正试着理清思路。我喜欢可观察对象解决开发和可读性问题的方式。正如我读到的，好处是巨大的。
HTTP和集合上的可观察对象似乎很直接。我怎么把这样的东西转换成可观察的模式。
这来自我的服务组件，用于提供身份验证。我希望它能像Angular2中的其他HTTP服务一样工作——支持数据、错误和完成处理程序。
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(function(firebaseUser) {
// do something to update your UI component
// pass user object to UI component
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
如果有任何帮助，我将不胜感激。我拥有的唯一替代解决方案是创建eventemitter。但我想在服务部门这样做是很糟糕的
你可以为promise功能添加包装器，将Observable返回给观察者。
使用defer()操作符创建一个Lazy Observable，它允许你只在观察者订阅时创建Observable。
import { of, Observable, defer } from 'rxjs';
import { map } from 'rxjs/operators';
function getTodos$(): Observable<any> {
return defer(()=>{
return fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => {
return json;
})
});
}
getTodos$().
subscribe(
(next)=>{
console.log('Data is:', next);
}
)
你可以为promise功能添加包装器，将Observable返回给观察者。
使用defer()操作符创建一个Lazy Observable，它允许你只在观察者订阅时创建Observable。
import { of, Observable, defer } from 'rxjs';
import { map } from 'rxjs/operators';
function getTodos$(): Observable<any> {
return defer(()=>{
return fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => {
return json;
})
});
}
getTodos$().
subscribe(
(next)=>{
console.log('Data is:', next);
}
)
您还可以使用Subject并从promise触发它的next()函数。请看下面的例子:
添加如下代码(我使用的是service)
class UserService {
private createUserSubject: Subject < any > ;
createUserWithEmailAndPassword() {
if (this.createUserSubject) {
return this.createUserSubject;
} else {
this.createUserSubject = new Subject < any > ();
firebase.auth().createUserWithEmailAndPassword(email,
password)
.then(function(firebaseUser) {
// do something to update your UI component
// pass user object to UI component
this.createUserSubject.next(firebaseUser);
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
this.createUserSubject.error(error);
// ...
});
}
}
}
从组件创建用户，如下所示
UserComponent {
构造函数(私有userService: userService) {
this.userService.createUserWithEmailAndPassword()。订阅(用户=> console.log(用户)，错误=> console.log(错误);
｝
｝
Rxjs提供了toPromise()运算符，
如代码示例所示:
@Injectable({
providedIn: 'root'
})
export class InventoryService {
constructor(private httpClient: HttpClient) {}
getCategories(): Observable<Category[]> {
const url = 'https://www.themealdb.com/api/json/v1/1/categories.php';
return this.httpClient.get<CategoriesResponse>(url).pipe(
map(response => response.categories)
);
}
}
在你的组件中，你可以应用toPromise()操作符:
export class AppComponent {
categories: any[];
constructor(private inventoryService: InventoryService) {}
public async loadCategories() {
this.categories = await this.inventoryService
.getCategories()
.**toPromise()**
但目前Rxjs7+已弃用，建议使用lastValueFrom()操作符:
public async loadCategories() {
const categories$ = this.inventoryService.getCategories();
this.categories = await **lastValueFrom**(categories$);
}
我希望它对更新版本的更新代码有所帮助:')
