如何在 Angular 中通过 HTTP 检索二进制数据？

Question

我正在用 Cordova 编写一个 Angular/TypeScript 应用程序，它需要从服务器下载二进制文件。

基于another question，我发现我需要在请求参数上设置适当的响应类型，以防止 Angular 尝试将响应主体解释为 JSON（这会导致崩溃，因为它是二进制数据)。

该问题的答案和docs 将我指向Blob 和ArrayBuffer 作为可能的值。

不幸的是，我找不到任何解释这两者之间的区别（不，the respective question 并没有真正启发我），并且都以自己的方式失败。

数组缓冲区

当使用这个时，我的应用程序由于超出了 Angular¹ 内部深处的某个最大堆栈大小而崩溃并显示 RangeError。

Blob

这样，请求就通过了，但除非我遗漏了什么，否则调试器会显示我只得到了一个具有 blob 大小和 MIME 类型的小对象，但实际的二进制数据却丢失了！

更重要的是，answer on the aforementioned question 指出了一个TextDecoder 来“解码结果”。

我不能以某种方式将二进制响应正文作为字节数组获取吗？

---

¹：我实际上必须扩展这个由另一个（我或多或少无法访问）团队启动的应用程序，其成员围绕 Angular 的 @ 添加了几层包装和参数/结果转换987654329@ 服务并没有让调试变得更容易，但我非常有信心我已将断点设置在最底层，因此不会遇到包装器的任何影响。

Answer 1

要以字节数组的形式访问 blob，请使用 FileReader：

//use slice if your blob is too big
var chunkBlob = blobObject.slice(offset, chunk_size);

var fileReader = new FileReader();
fileReader.onload = function() {
    var byteArray = new Uint8Array(this.result);
}
fileReader.readAsArrayBuffer(chunkBlob);

至于 Blob 和 ArrayBuffer 的区别，你可以对 blob 对象做些什么。相比之下，ArrayBuffer 可以通过DataView、TypedArray 或TextDecoder 同步访问。 ArrayBuffer 是 ECMAScript 的一部分，但 Blob 不是。

From mozilla.org:

Blob 对象表示不可变的原始数据的类似文件的对象。 Blob 表示不一定是 JavaScript 原生的数据 格式。