级联调用

级联调用意味着调用A执行后，调用B会基于A执行，调用C又会基于调用B执行，以此类推。

依赖调用

依赖调用意味着调用需要按顺序执行。调用2必须在调用1返回后执行。甚至可能调用2需要使用调用1返回的数据。

想象下以下场景：

  • 用户需要先登录
  • 然后可以获取用户详情
  • 再然后可以获取用户订单

Promise 方式

  1. login()
  2.      .then(getUserDetails)
  3.      .then(getOrdersByUser)

RxJS 方式

  1. let stream$ = Rx.Observable.of({ message : 'Logged in' })
  2.       .switchMap( result => {
  3.          return Rx.Observable.of({ id: 1, name : 'user' })
  4.       })
  5.       .switchMap((user) => {
  6.         return Rx.Observable.from(
  7.            [ { id: 114, userId : 1 },
  8.              { id: 117, userId : 1 }  ])
  9.       })
  11. stream$.subscribe((orders) => {
  12.   console.log('Orders', orders);
  13. })
  15. // 订单数组

在 RxJS 示例中我简化了很多东西，但想象下如果替换了

  1. Rx.Observable.of()

执行适当的 ajax() 调用，就像在操作符和 Ajax一章中所做的。

半依赖

  • 可以获取用户详情
  • 然后并行地获取订单和消息

Promise 方式

  1. getUser()
  2.    .then((user) => {
  3.       return Promise.all(
  4.         getOrders(),
  5.         getMessages()
  6.       )
  7.    })

RxJS 方式

  1. let stream$ = Rx.Observable.of({ id : 1, name : 'User' })
  2. stream.switchMap((user) => {
  3.   return Rx.Observable.forkJoin(
  4.      Rx.Observable.from([{ id : 114, user: 1}, { id : 115, user: 1}]),
  5.      Rx.Observable.from([{ id : 200, user: 1}, { id : 201, user: 1}])
  6.   )
  7. })
  9. stream$.subscribe((result) => {
  10.   console.log('Orders', result[0]);
  11.   console.log('Messages', result[1]);
  13. })

陷阱

我们用 switchMap() 替代了 flatMap()，所以如果需要的话我们可以取消 ajax 调用，这在菜谱 - auto complete 中更有实际意义。