Angular服务中Observable管道用async/await返回Uint8Array报错解决

这个问题我之前也碰到过！核心原因是async函数本身会返回Promise，你在map操作符里用async，相当于把每个Blob值转换成了Promise<Uint8Array>，所以整个Observable的类型就变成了Observable<Promise<Uint8Array>>，和你想要的Observable<Uint8Array>不匹配，自然就抛出类型错误了。

想要保留async-await的写法同时返回正确类型的Observable，你只需要把map换成高阶映射操作符（比如switchMap、concatMap或者mergeMap），这些操作符能够自动处理Promise类型的返回值，将其转换为Observable并展开到主数据流中。

修正后的代码示例 #

public loadBinaryPDF(url): Observable<Uint8Array> {
  return this.httpClient.get(url, { responseType: 'blob' }).pipe(
    switchMap(async blob => {
      const arrayBuff = await new Response(blob).arrayBuffer();
      return new Uint8Array(arrayBuff);
    })
  );
}

为什么这样可行？ #

• switchMap是RxJS的高阶映射操作符，它接收一个返回Observable或Promise的函数作为参数
• 当你在switchMap里使用async-await时，async函数返回的Promise<Uint8Array>会被RxJS自动转换为一个发出该Uint8Array值的Observable
• 最终整个数据流的类型就变成了Observable<Uint8Array>，完美符合你的需求

如果你想更明确地处理Promise，也可以用from操作符把Promise转换成Observable，再通过switchMap合并：

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

public loadBinaryPDF(url): Observable<Uint8Array> {
  return this.httpClient.get(url, { responseType: 'blob' }).pipe(
    switchMap(blob => from(new Response(blob).arrayBuffer())),
    map(arrayBuff => new Uint8Array(arrayBuff))
  );
}

两种写法都能解决问题，第一种更贴近你想要保留async-await的习惯。

内容的提问来源于stack exchange，提问作者Kamil Kiełczewski