RxJS Observable归约：如何串联Observable结果拼接字符串？

嘿，这个需求太常见了！你要的就是按顺序执行多个返回Observable的服务，把每个结果依次追加到总结果里，用RxJS的几个核心操作符就能轻松实现，分两种场景给你拆解：

1. 固定次数的服务调用 #

如果明确知道要调用几次doSomething（比如就是3次），用concatMap链式调用就很合适——它会等前一个Observable完成后，再执行下一个，还能拿到前一次的拼接结果：

import { of } from 'rxjs';
import { concatMap, map } from 'rxjs/operators';

const something = new Something();

// 从空字符串开始，依次拼接每次调用的结果
of('')
  .pipe(
    // 第一次调用，把空字符串和第一个结果拼接
    concatMap(prev => something.doSomething().pipe(map(current => prev + current))),
    // 第二次调用，用第一次的拼接结果继续追加
    concatMap(prev => something.doSomething().pipe(map(current => prev + current))),
    // 有多少次调用就加多少个concatMap
  )
  .subscribe(finalStr => {
    console.log('最终拼接结果:', finalStr);
  });

2. 动态次数的服务调用（比如从数组生成任务） #

如果调用次数是动态的（比如有一个任务列表，要挨个执行），用concat+scan的组合更灵活：

import { concat } from 'rxjs';
import { scan } from 'rxjs/operators';

// 假设你有一堆需要传入doSomething的参数（没有参数的话直接生成空数组就行）
const taskList = ['user1', 'user2', 'user3'];

// 把每个任务转换成Observable
const taskObservables = taskList.map(param => something.doSomething(param));

// 顺序执行所有任务，同时累积拼接结果
concat(...taskObservables)
  .pipe(
    // scan就像数组的reduce，每一步都把当前结果追加到累积值里，初始值是空字符串
    scan((total, current) => total + current, '')
  )
  .subscribe({
    next: currentTotal => console.log('当前累积结果:', currentTotal),
    complete: () => console.log('所有任务都完成啦！')
  });

关键操作符为啥好用？ #

• concat: 严格保证顺序，前一个服务请求完成后才会触发下一个，完全符合你"依次"执行的要求。
• scan: 实时累积结果，如果你只需要最终结果，在scan后面加个last()就能只拿到最后一次的拼接值。
• concatMap: 固定链式场景下更直观，每一步都能明确处理前结果和当前结果的拼接。

另外别忘了，如果doSomething可能报错，记得加catchError处理异常，不然一个请求失败整个流就断了哦～

内容的提问来源于stack exchange，提问作者Kiwi