如何处理来自服务器的 JSON 和 Blob 响应？

Question

我正在使用旧版 API，如果一切正常，它的发布请求返回 pdf 文件的路线之一。但是，当某些验证失败时 - 它会以 JSON 响应的形式返回错误。

此类情况如何处理？我不能简单地将

responseType=blob

设置为 ajax 请求，因为当返回 JSON 错误时，我收到以下内容：

SyntaxError: Unexpected token 'o', "[object Blob]" is not valid JSON

。

但是当响应是 pdf 文件时，在从中创建 Blob 后

var blob = new Blob([response], { type: 'application/pdf' });

pdf 中的某些元素丢失，并且字体不同。设置时

responseType=blob

pdf 已正确保存

Answer 1

在某些情况下您似乎想将响应解析为 JSON。正如您所注意到的，简单地编写

JSON.parse(blob)

是行不通的，因为强制转换为字符串的 blob 只会给您

[object Blob]

，这是无效的 JSON。

相反，您必须首先在 blob 上使用

text

方法：

const data = JSON.parse(await blob.text())

不过这里有一个警告。只要服务器的响应使用 UTF-8 作为字符编码（现在几乎是默认编码），这种方法就可以正常工作。但如果不是，那么我们需要一种更复杂的方法 - 我们需要从 Content-Type header

1

读取实际编码，然后使用 ^a FileReader 及其

readAsText

方法

与 

blob.text() 不同，支持指定编码。

FileReader

API 较旧，并且不返回 Promise，因此它的用法有点复杂：

// This assumes that `xhr` is the XMLHttpRequest object of your request
const contentType = xhr.getResponseHeader('Content-Type')
const charset = contentType?.split('charset=')[1] || 'UTF-8'
const text = await new Promise((resolve, reject) => {
  const reader = new FileReader()
  reader.addEventListener('load', () => resolve(reader.result))
  reader.addEventListener('error', () => reject(new Error('Blob decoding failed'))
  reader.readAsText(blob, charset)
})
const data = JSON.parse(text)

---

脚注：

1：_{不，blob.type不会有帮助，因为它只包含 MIME 类型，而不包含编码。如果}

Content-Type

是

application/json; charset=ISO-8859-1

那么

blob.type

就只是

application/json

。