responseType体验

最新推荐文章于 2024-01-12 14:46:14 发布

原创最新推荐文章于 2024-01-12 14:46:14 发布 · 653 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

博客讲述了在项目中遇到的前端下载二进制文件失败的问题，通过尝试设置不同的Blob类型和HTTP响应头的content-type，最终发现设置XMLHttpRequest的responseType为'blob'能成功解析并打开文件。文章强调了responseType的重要性，解释了其不同值的含义和兼容性问题，并提醒注意同步请求设置responseType可能引发的错误。

项目中有一个按钮下载后端传过来的二进制文件，无奈设置了各种的二进制type,后端传的解析type都无法打开文件。

let url = new Blob([res.data], { type: res.headers["content-type"] });
let fileName = res.headers["content-disposition"]
  .split(";")[1]
  .split("filename=")[1];
const elink = document.createElement("a");
elink.href = URL.createObjectURL(url);
elink.download = decodeURIComponent(fileName);
elink.style.display = "block";
document.body.appendChild(elink);
elink.click();
window.URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);

后来设置了promise请求的对象的responseType: "blob"，成功解析文件，打开了文件。下面对responseType做一下记录。

XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。

将responseType的值设置为"document"通常会被忽略. 当将responseType设置为一个特定的类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容呢?恭喜你，你会发现服务器返回的数据变成了null，即使服务器返回了数据。还有一个要注意的是，给一个同步请求设置responseType会抛出一个InvalidAccessError 的异常。

responseType支持以下几种值：

“”
responseType 为空字符串时，采用默认类型 DOMString，与设置为 text 相同。
arraybuffer
response 是一个包含二进制数据的 JavaScript ArrayBuffer。
blob
response 是一个包含二进制数据的 Blob 对象。
document
response 是一个 HTML Document 或 XML XMLDocument，这取决于接收到的数据的 MIME 类型。请参阅 XMLHttpRequest 中的 HTML 以了解使用 XHR 获取 HTML 内容的更多信息。
json
response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
text
response 是一个以 DOMString 对象表示的文本。
ms-stream
response 是下载流的一部分；此响应类型仅允许下载请求，并且仅受 Internet Explorer支持。