【问题标题】:Making an Observable from a callback从回调中创建一个 Observable
【发布时间】:2017-08-25 03:55:34
【问题描述】:

当网站被访问并且用户已经登录时,我有一个需要异步响应 true/false 的身份验证守卫。

我正在使用 Firebase 的 onAuthStateChanged (link to docs),它使用回调函数。如何将我的 isLoggedIn() 方法变成可以返回 Observable<boolean> 的方法?

打字稿:

get isLoggedIn(): Observable<boolean> {

    // want something like this:
    return Observable.fromCallback(firebase.auth().onAuthStateChanged).map(user => !!user);

    // this returns () => boolean, but I need a promise or observable
    return firebase
      .auth()
      .onAuthStateChanged((user) => {
        return !!user;
      });

}

【问题讨论】:

    标签: javascript angular firebase firebase-authentication rxjs


    【解决方案1】:

    你可以这样做。

    get isLoggedIn(): Observable<boolean> {
    
      // want something like this:
      return Observable.create(
        observer => firebase
            .auth()
            .onAuthStateChanged((user) => {
              observer.next(!!user)
            });
        );
    }
    

    【讨论】:

    • 请注意,这将为每个属性访问/订阅添加一个侦听器,并且不会删除该侦听器。传递给create 的箭头函数应该返回onAuthStateChanged 的结果(这是一个删除监听器的函数)。这样做会在 observable 被取消订阅时看到监听器被移除。
    • @cartant 或 rohit 您介意添加一个订阅/取消订阅的示例以使这个答案更彻底吗?
    • onAuthStateChanged() 返回取消订阅函数,因此您只需在创建 Observable 时删除订阅函数中的花括号:Observable.create(observer =&gt; firebase.auth().onAuthStateChanged(user =&gt; observer.next(!!user)))
    • bindCallback 是自 RxJs 6 以来解决该问题的现代方法。结帐these examples
    【解决方案2】:

    还有另一种使用 rxjs/observable/bindCallback 中的 bindCallback 的方法

    const observable=bindCallback(functionWhichExpectsCallBack)
    

    例如

    function foo(value, callback) {
      callback(value);
    }
    //converts callback to observable
        const observable = bindCallback(foo); 
        observable(1)
          .subscribe(console.log); 
    

    【讨论】:

      【解决方案3】:

      注意:bindCallbackObservable.create 已弃用,
      你可以改用new Observable

      ...
      return new Observable((subscriber) => {
        firebase
          .auth()
          .onAuthStateChanged((user) => {
            subscriber.next(user);
          })
      }
      

      【讨论】:

      猜你喜欢
      • 2016-12-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-03
      • 2017-10-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多