【问题标题】:Replace callback hell with observable用 observable 替换回调地狱
【发布时间】:2016-09-19 16:22:18
【问题描述】:

RxJS github repo 解释了如何从事件或数组创建 observable。我知道如何用 async 或 Promise 替换回调地狱,但我找不到关于如何为执行异步任务的函数创建和返回 observable 的示例。

For example,

x = getData();
y = getMoreData(x);
z = getMoreData(y);
...

getData(function(x){
    getMoreData(x, function(y){
        getMoreData(y, function(z){ 
            ...
        });
    });
});

如何用 observables 替换这个回调地狱?我发现我们可以在RxJS github - creating observable 中调用observer.next() 方法,但无法为这个示例找到一个实现。

【问题讨论】:

  • @Thomas 它将并行运行所有功能。在我的情况下,它是串行的,第一个结果作为下一个函数的输入,依此类推。

标签: javascript callback reactive-programming rxjs


【解决方案1】:

您可以使用flatMap 运算符来链接结果。看看这里:RxJS Promise Composition (passing data)。基本上链接承诺与链接flatMap 相同。那就是:

pl().then(p2).then(p3).then(console.log);

类似于:

 Rx.Observable.just()
         .flatMap(p1)
         .flatMap(p2)
         .flatMap(p3);

所以从 Promise 到 Observable 的转换很简单。如果你有一个使用回调而不是 Promise 操作的函数,我可以想到两个选项:

  • 尝试使用Rx.Observable.fromCallbackRx.Observable.fromNodeCallback
  • 将回调包装在您自己的 observable 中。也看看这里:rx.js how to chain observables

例如,function asyncCall (param, cb) 会导致类似:

Rx.Observable.create (function(observer){
  asyncCall(param, function cb(err, data){
    if (err) {observer.onError(err)}
    else {
      observer.onNext(x);
      // The following is supposing your callback is only called once, so there is no more data
      observer.onCompleted();
    }
  }
})

完成后,您可以使用flatMap(或concatMap,如果执行顺序很重要),如前所示。

【讨论】:

  • 所以我必须在每个函数中传递观察者,并且它必须在它完成时调用observer.onNext(),如果我们只有2-4个回调,是不是让回调地狱变得更加复杂?
  • 我不明白你的意思。
  • 你并不孤单。我理解你@Ankush。是的,它是“可观察的地狱”。 Async/Await 是让我们凡人能够理解的方法。
猜你喜欢
  • 2016-08-30
  • 1970-01-01
  • 2017-04-06
  • 2017-05-08
  • 1970-01-01
  • 1970-01-01
  • 2013-08-08
  • 2018-06-26
  • 2017-01-01
相关资源
最近更新 更多