在列表上异步操作时保留结果的顺序

Question

我有一个异步函数来处理来自列表的请求，但是当每个请求完成时，它不像之前声明的那样排序（因为它是异步的）。如何异步获取但保留原始顺序？

这是小提琴http://jsbin.com/papunixume/edit?html,js,console

// clear console every single run
console.clear()

// create promise
const cp = (msg, timeout) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(msg)
    }, timeout)
  })
}

const a = cp('a', 1000)
const b = cp('b', 500)
const c = cp('c', 800)

Rx.Observable.of([a, b, c]).subscribe(val => {
  val.map(res => {
    res.then(x => console.log(x))
  })
})

结果是

"b"
"c"
"a"

预期

"a"
"b"
"c"

Answer 1

这实际上取决于您需要什么以及如何使用 Promise。你现在拥有的根本不需要 RxJS，因为你只是创建了一个 Promise 数组，然后在每个 Promise 上调用 then()。

如果您想以更多“RxJS 方式”进行操作，您可以在 Promise 到达时收集结果，同时使用 concatMap() 运算符保持相同的顺序：

Rx.Observable.from([a, b, c])
  .concatMap(promise => promise)
  .subscribe(val => console.log(val));

魔术发生在 concatMap() 内部，因为它识别 Promise 类的实例并以特殊方式处理它们（将它们与 then() 链接并重新发送它们的结果）。

查看演示：http://jsbin.com/gobayoy/4/edit?js,console

或者您可以等到所有 Promise 完成，然后使用 forkJoin() 将它们的所有结果作为单个数组发出：

Rx.Observable.forkJoin(a, b, c)
  .subscribe(val => console.log(val));

查看演示：http://jsbin.com/zojuya/2/edit?js,console

同样，RxJS 会自动处理 Promises，因此forkJoin() 能够等待所有 Promises 完成，而无需担心。