如何使用 typescript/javascript 正确解析 multipart/byteranges 响应？

Question

我是 TypeScript/JavaScript 的新手，我正在尝试使用 TypeScript 和 XMLHttpRequest 2 对二进制文件的不同部分执行多部分范围请求 ( RFC 7233 )。

根据RFC 7233，多部分/字节范围响应具有以下内容：

 HTTP/1.1 206 Partial Content
 Date: Wed, 15 Nov 1995 06:25:24 GMT
 Last-Modified: Wed, 15 Nov 1995 04:58:08 GMT
 Content-Length: 1741
 Content-Type: multipart/byteranges; boundary=THIS_STRING_SEPARATES

 --THIS_STRING_SEPARATES
 Content-Type: application/pdf
 Content-Range: bytes 500-999/8000

 ...the first range...
 --THIS_STRING_SEPARATES
 Content-Type: application/pdf
 Content-Range: bytes 7000-7999/8000

 ...the second range
 --THIS_STRING_SEPARATES--

我看到两个选项：

1. 将响应的正文视为二进制数据数组（set XMLHttpRequest.responseType = "arraybuffer"），将边界字符串转换为二进制，在二进制数据数组中搜索由边界字符串转换为二进制的每个正文部分，提取每个有效负载的标头并将它们转换为字符串？或者，
2. 与上面类似，但将正文视为字符串（set XMLHttpRequest.responseType = "text"），识别由边界字符串分隔的正文部分，并将有效负载转换为二进制数据数组？

在 javascript/typescript 中处理/解析此类响应的正确方法是什么，因为响应包含多个正文部分，每个部分都有自己的标头（字符串）和有效负载（二进制）？

有没有更简单的方法？

欢迎任何建议。谢谢！

Answer 1

我什至不确定你会如何使用"arraybuffer"响应类型来做到这一点，但我以前用它来解析多部分/字节范围响应：

function parseMultipartBody (body, boundary) {
  return body.split(`--${boundary}`).reduce((parts, part) => {
    if (part && part !== '--') {
      const [ head, body ] = part.trim().split(/\r\n\r\n/g)
      parts.push({
        body: body,
        headers: head.split(/\r\n/g).reduce((headers, header) => {
          const [ key, value ] = header.split(/:\s+/)
          headers[key.toLowerCase()] = value
          return headers
        }, {})
      })
    }
    return parts
  }, [])
}

将它与 XMLHttpRequest 一起使用时，它可能看起来像这样：

const client = new XMLHttpRequest()
client.open('GET', 'example.pdf', true)
client.setRequestHeader('Range', 'bytes=500-999,7000-7999')
client.onreadystatechange = function() {
  if (client.readyState == 4 && client.status === 206) {
    const boundary = client.getResponseHeader('Content-Type').match(/boundary=(.+)$/i)[1]
    if (boundary) console.log('PARTS', parseMultipartBody(client.resposeText, boundary))
  }
}
client.send()

您的示例响应的输出如下所示：

[
  {
    "body": "...the first range...",
    "headers": {
      "content-type": "application/pdf",
      "content-range": "bytes 500-999/8000"
    }
  },
  {
    "body": "...the second range",
    "headers": {
      "content-type": "application/pdf",
      "content-range": "bytes 7000-7999/8000"
    }
  }
]