Đọc phản hồi một phần XHR cho dữ liệu nhị phân, có thể?

Question

Tôi hiện đang nghiên cứu khả năng đọc một phần câu trả lời XHR với dữ liệu nhị phân. Cách tiếp cận hiện tại của chúng tôi dựa trên thuộc tính 'responseText' và mã hóa base64. Rõ ràng, điều này là xa tối ưu.

Làm thế nào chúng ta có thể đọc một phần phản ứng Blob/ArrayBuffer bằng XHR? Khi tôi thử trong Chrome, toàn bộ ArrayBuffer/Blob được tạo sẵn khi readyState = 4, nhưng không phải trước đó.

Để tóm tắt, có vẻ như với tôi rằng:

• thuộc tính responseText Reading XHR của: Responses có thể được đọc trước khi readyState = 4, và chúng tôi có thể truyền mã hóa base64 dữ liệu nhị phân lại cho khách hàng
• Reading XHR của thuộc tính phản hồi với responseType = 'arraybuffer': Không đọc một phần câu trả lời, nhưng toàn bộ bộ đệm được tạo sẵn khi readyState = 4

Tôi có thiếu gì đó ở đây không? Cách tiếp cận nào chúng ta có thể thực hiện để đọc phản ứng nhị phân một phần?

Answer 1

Giữ mắt trên the fetch API, hiện tại supported by Firefox and Chrome.

Answer 2

Có một cách, mặc dù chưa chuẩn. Firefox cho phép bạn đặt responseType trên XHR thành "moz-blob", "moz-chunked-text" hoặc "moz-chunked-arraybuffer", tùy thuộc vào việc nào phù hợp với bạn. Sau đó, khi bạn nghe sự kiện progress, bạn sẽ có thể truy cập vào một phần dữ liệu như đã nói. MDN có thêm thông tin về số here và here.

Chrome sẽ hỗ trợ Streams API, nhưng đó là not ready yet. Firefox cũng có thể eventually hỗ trợ nó. Tôi đọc ở đâu đó mà IE đã làm, mặc dù tôi không thể tìm thấy bất kỳ tài liệu chính thức nào để xác nhận điều đó.

Answer 3

API tốt nhất để sử dụng làm thay thế XHR được tìm nạp bằng luồng có thể đọc được.

này được giải thích ở đây: https://developers.google.com/web/fundamentals/primers/async-functions#example_streaming_a_response

Chrome đã hỗ trợ nó. Firefox thực hiện nó nhưng nó phải được kích hoạt bằng tay cho thời điểm này (nó sẽ được kích hoạt theo mặc định trong một phiên bản tương lai). Trong khi chờ kích hoạt này, Firefox triển khai XHR với loại phản hồi không chuẩn moz-chunked-arraybuffer

Thư viện https://www.npmjs.com/package/fetch-readablestream đề xuất API triển khai hai phương pháp này. Nó sử dụng https://www.npmjs.com/package/web-streams-polyfill.