如何用rxjs解决回调地狱

Question

当下一个请求依赖于前一个请求的响应时，原生js会遇到callback hell的问题：

makeHttpCall('/items', 
   items => {
      for (itemId of items) {
         makeHttpCall(`/items/${itemId}/info`,
           itemInfo => { 
              makeHttpCall(`/items/${itemInfo.pic}`,
                img => {
                    showImg(img);
              });   
           });
      }
});
beginUiRendering();

利用promise可以解决：

makeHttpCall('/items')
    .then(itemId => makeHttpCall(`/items/${itemId}/info`))
    .then(itemInfo => makeHttpCall(`/items/${itemInfo}.pic}`))
    .then(showImg);

那么使用rxjs，应该如何解决相同的问题？

Answer 1

这个例子上 Observable (异步计算的多个结果) 并不比Promise (异步计算的唯一结果) 更方便。因为每个计算 (makeHttpCall, showImg) 就只有一个结果。

一定要用Rx自然也能做，写出来应该会发现和Promise的版本区别不大，只是then变成了flatMap。

Answer 2

flatMap或者concatMap操作符把内部的事件流合并到主事件流上，逻辑上形容就是把上一个主事件流映射为若干子事件，之后再把子事件的结果作为一个新流拼接到主事件流上。

详见:concatMap

Answer 3

makeHttpCall('/items')
    .mergeMap(itemIds =>
        Observable.from(itemIds)
        .mergeMap(id => makeHttpCall(`/items/${id}/info`)
            .mergeMap(itemInfo => makeHttpCall(`items/${itemInfo}/pic`))))
    .subscribe(img => showImg(img));