克服“responseType: “blob“”的挑战：轻松获取json格式报错信息

2023-07-02 15:49:07

使用 Blob 对象获取二进制数据

在使用 Fetch API 发送请求时，我们可以利用 "responseType" 属性指定服务器返回数据的格式。默认情况下，响应会被解析为文本格式，但如果我们需要获取二进制数据（如图像、音频或视频），我们可以将 "responseType" 属性设置为 "blob"。

Blob 对象的特性

Blob 对象是一个二进制数据容器，可以存储多种类型的数据，包括图像、音频、视频和文本。当我们使用 "responseType: "blob"" 的请求时，服务器返回的数据将被存储在 Blob 对象中。

获取 JSON 格式报错信息

虽然 Blob 对象可以存储各种类型的数据，但它无法直接解析 JSON 格式的报错信息。这是因为 Blob 对象是一个二进制数据对象，不能直接转换成 JSON 格式。

为了获取 JSON 格式的报错信息，我们需要使用 FileReader 将 Blob 数据转换成 JSON 格式。FileReader 是一个 JavaScript 内置对象，可以将 Blob 数据转换为字符串、ArrayBuffer 或 DataURL。

使用 FileReader 转换 Blob 数据

以下是如何使用 FileReader 将 Blob 数据转换为 JSON 格式：

const blob = new Blob([data]);

const fileReader = new FileReader();

fileReader.onload = function() {
  const json = JSON.parse(fileReader.result);
};

fileReader.readAsText(blob);

在上面的代码中：

我们首先创建了一个包含数据的 Blob 对象。
接下来，我们创建了一个 FileReader 对象。
然后，我们设置了 FileReader 对象的 onload 事件处理程序。
在 onload 事件处理程序中，我们将 Blob 数据解析为字符串，然后再将其解析为 JSON 对象。

总结

使用 "responseType: "blob"" 的请求时，我们需要使用 FileReader 将 Blob 数据转换为 JSON 格式。这可以通过创建 Blob 对象、创建一个 FileReader 对象并设置 FileReader 对象的 onload 事件处理程序来实现。在 onload 事件处理程序中，我们将 Blob 数据解析为字符串，然后再将其解析为 JSON 对象。