axios 如何将 blob 与 arraybuffer 作为 responseType 处理？

Question

我正在下载带有axios的 zip 文件。为了进一步处理，我需要获取已下载的“原始”数据。据我所知，在 Javascript 中有两种类型：Blob 和 Arraybuffers。两者都可以responseType在请求选项中指定。

在下一步中，需要解压缩 zip 文件。我为此尝试了两个库：js-zip 和 adm-zip。两者都希望数据是一个 ArrayBuffer。到目前为止一切顺利，我可以将 blob 转换为缓冲区。在此转换之后，adm-zip 总是很高兴地提取 zip 文件。但是，js-zip 会抱怨文件损坏，除非 zip 已'arraybuffer'作为 axios下载responseType。js-zip 不适buffer用于从blob.

这让我很困惑。我想这两个ArrayBuffer和Blob本质上的底层内存只是意见。将某些内容下载为 blob 与缓冲区之间可能存在性能差异。但是结果数据应该是一样的吧？

好吧，我决定进行实验并发现：

如果指定responseType: 'blob'，axios 会将 转换response.data为字符串。假设您对该字符串进行哈希处理并获得哈希码 A。然后将其转换为缓冲区。对于这种转换，您需要指定一种编码。根据编码的不同，您将获得各种新的哈希值，我们称它们为 B1、B2、B3，...当指定 'utf8' 作为编码时，我将返回原始哈希值 A。

所以我猜当下载数据为 a 时'blob'，axios 隐式地将其转换为用 utf8 编码的字符串。这似乎非常合理。

现在您指定responseType: 'arraybuffer'. Axios 为您提供了一个缓冲区作为response.data. 对缓冲区进行哈希处理，您会得到一个哈希码 C。此代码与 A、B1、B2 中的任何代码都不对应，...

那么当下载数据为 时'arraybuffer'，你得到完全不同的数据？

现在对我来说，解压缩库 js-zip 会抱怨数据是否作为'blob'. 它可能实际上以某种方式损坏了。但是 adm-zip 是如何提取它的呢？我检查了提取的数据，它是正确的。这可能只是这个特定 zip 存档的情况，但仍然让我感到惊讶。

这是我用于实验的示例代码：

//typescript import syntax, this is executed in nodejs
import axios from 'axios';
import * as crypto from 'crypto';

axios.get(
    "http://localhost:5000/folder.zip", //hosted with serve
    { responseType: 'blob' }) // replace this with 'arraybuffer' and response.data will be a buffer
    .then((response) => {
        console.log(typeof (response.data));

        // first hash the response itself
        console.log(crypto.createHash('md5').update(response.data).digest('hex'));

        // then convert to a buffer and hash again
        // replace 'binary' with any valid encoding name
        let buffer = Buffer.from(response.data, 'binary');
        console.log(crypto.createHash('md5').update(buffer).digest('hex'));
        //...

是什么造成了这里的差异，我如何获得“真实”的下载数据？

Answer 1

来自axios 文档：

// `responseType` indicates the type of data that the server will respond with
// options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
//   browser only: 'blob'
responseType: 'json', // default

'blob' 是“仅浏览器”选项。

因此，从 node.js 开始，当您设置 时responseType: "blob"，"json"将实际使用，我猜这是"text"在没有获取可解析的 JSON 数据时的回退。

以文本形式获取二进制数据很容易产生损坏的数据。因为Body.text()和许多其他 API返回的文本是USVStrings（它们不允许不成对的代理代码点）并且因为响应被解码为 UTF-8，所以二进制文件中的某些字节无法映射到字符正确，因此将被替换为？(U+FFDD) 替换字符，无法恢复之前的数据：您的数据已损坏。

这是一个解释这一点的片段，以 .png 文件的标题0x89 0x50 0x4E 0x47为例。

(async () => {

  const url = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png';
  // fetch as binary
  const buffer = await fetch( url ).then(resp => resp.arrayBuffer());

  const header = new Uint8Array( buffer ).slice( 0, 4 );
  console.log( 'binary header', header ); // [ 137, 80, 78, 61 ]
  console.log( 'entity encoded', entityEncode( header ) );
  // [ "U+0089", "U+0050", "U+004E", "U+0047" ]
  // You can read more about  (U+0089) character here
  // https://www.fileformat.info/info/unicode/char/0089/index.htm
  // You can see in the left table how this character in UTF-8 needs two bytes (0xC2 0x89)
  // We thus can't map this character correctly in UTF-8 from the UTF-16 codePoint,
  // it will get discarded by the parser and converted to the replacement character
  
  // read as UTF-8 
  const utf8_str = await new Blob( [ header ] ).text();
  console.log( 'read as UTF-8', utf8_str ); // "?PNG"
  // build back a binary array from that string
  const utf8_binary = [ ...utf8_str ].map( char => char.charCodeAt( 0 ) );
  console.log( 'Which is binary', utf8_binary ); // [ 65533, 80, 78, 61 ]
  console.log( 'entity encoded', entityEncode( utf8_binary ) );
  // [ "U+FFDD", "U+0050", "U+004E", "U+0047" ]
  // You can read more about character ? (U+FFDD) here
  // https://www.fileformat.info/info/unicode/char/0fffd/index.htm
  //
  // P (U+0050), N (U+004E) and G (U+0047) characters are compatible between UTF-8 and UTF-16
  // For these there is no encoding lost
  // (that's how base64 encoding makes it possible to send binary data as text)
  
  // now let's see what fetching as text holds
  const fetched_as_text = await fetch( url ).then( resp => resp.text() );
  const header_as_text = fetched_as_text.slice( 0, 4 );
  console.log( 'fetched as "text"', header_as_text ); // "?PNG"
  const as_text_binary = [ ...header_as_text ].map( char => char.charCodeAt( 0 ) );
  console.log( 'Which is binary', as_text_binary ); // [ 65533, 80, 78, 61 ]
  console.log( 'entity encoded', entityEncode( as_text_binary ) );
  // [ "U+FFDD", "U+0050", "U+004E", "U+0047" ]
  // It's been read as UTF-8, we lost the first byte.
  
})();

function entityEncode( arr ) {
  return Array.from( arr ).map( val => 'U+' + toHex( val ) );
}
function toHex( num ) {
  return num.toString( 16 ).padStart(4, '0').toUpperCase();
}

node.js 中本来就没有 Blob 对象，所以 axios 没有给它打猴子补丁是有道理的，这样它们就可以返回一个其他人无论如何都无法使用的响应。

在浏览器中，您会得到完全相同的响应：

function fetchAs( type ) {
  return axios( {
    method: 'get',
    url: 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png',
    responseType: type
  } );
}

function loadImage( data, type ) {
  // we can all pass them to the Blob constructor directly
  const new_blob = new Blob( [ data ], { type: 'image/jpg' } );
  // with blob: URI, the browser will try to load 'data' as-is
  const url = URL.createObjectURL( new_blob );
  
  img = document.getElementById( type + '_img' );
  img.src = url;
  return new Promise( (res, rej) => { 
    img.onload = e => res(img);
    img.onerror = rej;
  } );
}

[
  'json', // will fail
  'text', // will fail
  'arraybuffer',
  'blob'
].forEach( type =>
  fetchAs( type )
   .then( resp => loadImage( resp.data, type ) )
   .then( img => console.log( type, 'loaded' ) )
   .catch( err => console.error( type, 'failed' ) )
);

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<figure>
  <figcaption>json</figcaption>
  <img id="json_img">
</figure>
<figure>
  <figcaption>text</figcaption>
  <img id="text_img">
</figure>
<figure>
  <figcaption>arraybuffer</figcaption>
  <img id="arraybuffer_img">
</figure>
<figure>
  <figcaption>blob</figcaption>
  <img id="blob_img">
</figure>