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

Question

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

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

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

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

数组缓冲区

当使用它时，我的应用程序崩溃并返回 RangeError，因为超出了 Angular¹ 内部深处的某个最大堆栈大小。

Blob

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

此外，answer on the aforementioned question 指向一个 TextDecoder 来“解码结果”。

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

---

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

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:

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format.