如何在RxJS链中传递值并获取前后调用的结果？

嘿，我懂你遇到的问题了——你有两个返回Promise的函数，得用第一个的结果调用第二个，最后还想同时拿到两者的返回值对吧？之前试了mergeMap和forkJoin没搞定，其实核心思路很简单，就是在第二个异步操作完成后，把第一个结果和第二个结果一起传递下去，我给你两种实用方案：

方案1：原生 Promise/Async-Await（无RxJS） #

如果不用RxJS的话，用普通的链式调用或者async/await就能轻松实现，代码可读性还高：

// 先模拟你的两个函数
function fetchBlob() {
  return fetch('https://example.com/image.jpg').then(res => res.blob());
}

function convertBlobToBase64(blob) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

// 链式调用写法
fetchBlob()
  .then(blob => {
    // 这里保留第一个结果`blob`，同时调用第二个函数
    return convertBlobToBase64(blob).then(base64 => ({ blob, base64 }));
  })
  .then(({ blob, base64 }) => {
    // 这里就能同时拿到两个值了！
    console.log('获取到的Blob:', blob);
    console.log('转换后的Base64:', base64);
  })
  .catch(err => console.error('处理出错:', err));

// 或者用更简洁的Async-Await写法
async function getBothResults() {
  try {
    const blob = await fetchBlob();
    const base64 = await convertBlobToBase64(blob);
    // 把两个结果打包返回
    return { blob, base64 };
  } catch (err) {
    console.error('处理出错:', err);
    throw err; // 可以选择抛出错误让上层处理
  }
}

// 调用函数
getBothResults().then(({ blob, base64 }) => {
  console.log('Blob:', blob);
  console.log('Base64:', base64);
});

方案2：RxJS 实现（对应你提到的mergeMap） #

你之前用mergeMap没成功，大概率是没在回调里把两个结果组合起来。其实mergeMap（也就是flatMap）完全适合这种串行依赖的场景，只要在内部把第一个值和第二个Observable的结果打包就行：

import { from } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';

// 将Promise转换为Observable
const fetchBlob$ = from(fetchBlob());
const convertToBase64$ = (blob: Blob) => from(convertBlobToBase64(blob));

fetchBlob$
  .pipe(
    mergeMap(blob => {
      // 调用第二个Observable，然后用map把两个值组合成对象
      return convertToBase64$(blob).pipe(
        map(base64 => ({ blob, base64 }))
      );
    })
  )
  .subscribe({
    next: ({ blob, base64 }) => {
      console.log('Blob:', blob);
      console.log('Base64:', base64);
    },
    error: err => console.error('处理出错:', err)
  });

为什么forkJoin不适合？ #

forkJoin的作用是并行执行多个独立的Observable，等所有Observable都完成后返回结果数组。但你的第二个函数依赖第一个的结果，属于串行依赖关系，所以forkJoin没法直接硬套，强行嵌套反而会把代码写复杂，mergeMap才是更合适的选择。

核心总结一下：不管用哪种方式，关键都是在第二个异步操作完成后，把第一个结果和第二个结果一起传递给下游，这样就能在最终环节同时拿到blob和base64了！

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