从接口中返回二进制数据

ajax 返回的数据的类型

通过设置 responseType 的值来规定返回的数据类型。

将 responseType 设置为特定值时，要确保与服务器返回的数据格式是兼容的。如果不兼容，response 的值将是 null。

• “”

  空的 responseTye 字符串与默认类型 “text” 相同。

• arraybuffer

  response 是一个包含二进制数据的 JavaScript 的 ArrayBuffer。

  返回的 arraybuffer 对象
  ArrayBuffer(10863)
  byteLength: 10863
  [[Prototype]]: ArrayBuffer
  [[Int8Array]]: Int8Array(10863)
  [[Uint8Array]]: Uint8Array(10863)
  [[ArrayBufferByteLength]]: 10863
  [[ArrayBufferData]]: 228
  

• blob https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

  response 是一个包含二进制数据的 Blob 对象。

  返回的 blob 对象
  Blob
  size: 10053
  type: "application/octet-stream"
  

• document

  response 是一个 html 或 xml 的 document，根据接收数据的 MIME 类型而定。

• json

  response 是通过将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象。

• text

  默认。response 是 DOMString 对象中的文本。

• ms-stream

  reponse 是流式下载的一部分，只用于下载的请求。

ajax 不同类型的返回形式、处理方法。

blob 转为 arraybuffer

// blob 转换为 arraybuffer
// 使用 Blob.prototype.arrayBuffer() 方法
// 方法返回一个 promise ，包含 blob 数据的 arraybuffer
var ab = xhr.response.arrayBuffer();
ab.then(res => {
    console.log(res); // res 就是返回的 arraybuffer 对象
})

// 利用 FileReader 的 readAsArrayBuffer 方法把blob 转为 arraybuffer
const reader = new FileReader();
reader.addEventListener('loadend', () => {
    // reader.result 包含被转化为类型化数组的 blob 中的内容
    console.log(reader.result);
});
reader.readAsArrayBuffer(xhr.response); 

更多二进制数据转换参考：ArrayBuffer、Blog、File的处理

jquery 设置responseType 为二进制数据

 $.ajax({
     url: 'url',
     xhrFields: { responseType: "arraybuffer" },
 }).done((result) => {
     //	result 为arrayBuffer类型
 })