关于rxjs使用的问题

新手上路,请多包涵

rxjs虽然对着文档学着使用了一下,但感觉还是很难融会贯通。
我设计了这样一个简单的场景,一个异步的函数get,希望他同步得按顺序依次打印一个数组,并记录这个函数调用的次数。
不使用rxjs我是这样实现的:

const arr = [1, 2, 3, 4, 5]
let count = 0;

f(0)

function get(callback) {
    setTimeout(callback, 1000)
}

function f(idx) {
    if (arr.length === idx) {
        console.log(`共执行${count}次`)
        return
    }
    get(() => {
        console.log(arr[idx])
        ++count
        f(++idx)
    })
}

请问各位,在rxjs下,怎样优雅得实现这个功能?

阅读 1.5k
2 个回答
const limit = 5
timer(0,1000).pipe(
    take(limit),
    map(n => n + 1)
).subscribe((n) => {
    console.log(n)
    n === limit && console.log(`共执行${limit}次`)
})

思路如下:

  1. 把数组转化为 Observable1 (此时 Observable1 会同步的输出数组里面的元素)
  2. 利用异步的回调函数把 Observable1 进行一个转换 Observable2 (此时 Observable2 会异步输出数组的元素)
  3. 因为需要按顺序依次打印一个数组,所以这里使用 concatMap 对 Observable1 进行一个转换。

代码如下:

import { from, concatMap, Observable } from 'rxjs';

const arr = [1, 2, 3, 4, 5];

function get(callback) {
  setTimeout(callback, 1000);
}

function createObservable(value) {
  return new Observable((subscriber) => {
    get(() => {
      subscriber.next(value);
      subscriber.complete();
    });
  });
}

from(arr)
  .pipe(concatMap((value) => createObservable(value)))
  .subscribe((value) => {
    console.log(value);
  });

在线运行: https://stackblitz.com/edit/r...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题