将承诺转换为可观察对象

我正试着理清思路。我喜欢可观察对象解决开发和可读性问题的方式。正如我读到的，好处是巨大的。

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转换为可观察对象的正确模式是使用defer和from操作符:

import { defer, from } from 'rxjs';
    
const observable$ = defer(() => from(myPromise()));

为什么我们需要延迟运算符?

承诺是热切的，这意味着一旦被召唤，它们就会立即开火。这与可观察对象的工作原理相反。可观察对象是懒惰的，它们只在调用.subscribe()时被触发。这就是为什么我们总是需要把它包装成一个延迟运算符的原因。from操作符不做这项工作，所以总是需要defer。

2021-09-28 10:50:37

其他回答

试试这个:

import 'rxjs/add/observable/fromPromise';
import { Observable } from "rxjs/Observable";

const subscription = Observable.fromPromise(
    firebase.auth().createUserWithEmailAndPassword(email, password)
);
subscription.subscribe(firebaseUser => /* Do anything with data received */,
                       error => /* Handle error here */);

你可以在这里找到fromPromise操作符的完整引用。

2016-09-04 16:53:08

将promise转换为可观察对象的正确模式是使用defer和from操作符:

import { defer, from } from 'rxjs';
    
const observable$ = defer(() => from(myPromise()));

为什么我们需要延迟运算符?

2021-09-28 10:50:37

import { from } from 'rxjs';

from(firebase.auth().createUserWithEmailAndPassword(email, password))
.subscribe((user: any) => {
      console.log('test');
});

下面是一个简短的版本，结合了上面的一些答案，将你的代码从承诺转换为可观察对象。

2020-10-31 20:36:52

如果你使用的是RxJS 6.0.0:

import { from } from 'rxjs';
const observable = from(promise);

2018-06-11 13:38:41

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$);
  }

我希望它对更新版本的更新代码有所帮助:')

2021-07-13 23:31:36

将承诺转换为可观察对象

推荐文章

最新文章

标签