如何使用 Fetch API 读取二进制分块响应。我正在使用以下代码，该代码可以从服务器读取分块响应。然而，数据似乎以某种方式编码/解码，导致getFloat32有时会失败。我尝试使用curl 读取响应，效果很好，这让我相信我需要做一些事情来使 fetch api 将块视为二进制。响应的内容类型正确设置为“application/octet-stream”。
const consume = responseReader => {
return responseReader.read().then(result => {
if (result.done) { return; }
const dv = new DataView(result.value.buffer, 0, result.value.buffer.length);
dv.getFloat32(i, true); // <-- sometimes this is garbled up
return consume(responseReader);
});
}
fetch('/binary').then(response => {
return consume(response.body.getReader());
})
.catch(console.error);
使用下面的express服务器来重现它。请注意，任何可以处理以下服务器的客户端 js 代码都可以。
const express = require('express');
const app = express();
app.get('/binary', function (req, res) {
res.header("Content-Type", "application/octet-stream");
res.header('Content-Transfer-Encoding', 'binary');
const repro = new Uint32Array([0x417055b8, 0x4177d16f, 0x4179e9da, 0x418660e1, 0x41770476, 0x4183e05e]);
setInterval(function () {
res.write(Buffer.from(repro.buffer), 'binary');
}, 2000);
});
app.listen(3000, () => console.log('Listening on port 3000!'));
使用上面的节点服务器 -13614102509256704 将被记录到控制台，但它应该只是〜16.48。如何检索原始写入的二进制浮点数？
正如您指出的那样，您的问题是
getFloat32 函数采用字节偏移量，有明确记录
但你的工作还有另一面。所以我会在这里添加
默认情况下，两者都不支持获取流FF and Chrome我更新了我的代码以处理两端的流。
const express = require('express');
const app = express();
app.get('/', function (req, res) {
res.send(`
<html>
<body>
<h1>Chrome reader</h1>
<script>
function dothis() {
var chunkedUrl = '/binary';
fetch(chunkedUrl)
.then(processChunkedResponse)
.then(onChunkedResponseComplete)
.catch(onChunkedResponseError)
;
function onChunkedResponseComplete(result) {
console.log('all done!', result)
}
function onChunkedResponseError(err) {
console.error(err)
}
function processChunkedResponse(response) {
var text = '';
var reader = response.body.getReader()
return readChunk();
function readChunk() {
return reader.read().then(appendChunks);
}
function appendChunks(result) {
if (!result.done){
var chunk = new Uint32Array(result.value.buffer);
console.log('got chunk of', chunk.length, 'bytes')
console.log(chunk)
}
if (result.done) {
console.log('returning')
return "done";
} else {
console.log('recursing')
return readChunk();
}
}
} }
</script>
</body>
</html>
`);
});
app.get('/firefox', function (req, res) {
res.send(`
<html>
<head>
<script src="./fetch-readablestream.js"></script>
<script src="./polyfill.js"></script>
</head>
<body>
<h1>Firefox reader</h1>
<script>
function readAllChunks(readableStream) {
const reader = readableStream.getReader();
const chunks = [];
function pump() {
return reader.read().then(({ value, done }) => {
if (done) {
console.log("its completed")
return chunks;
}
try{
console.log(new Int32Array(value.buffer))
}
catch (err) {
console.log("error occured - " + err)
}
return pump();
});
}
return pump();
}
function dothis() {
fetchStream('/binary', {stream: true})
.then(response => readAllChunks(response.body))
.then(chunks => console.dir(chunks))
.catch(err => console.log(err));
}
</script>
</body>
</html>
`);
});
app.get('/binary', function (req, res) {
res.header("Content-Type", "application/octet-stream");
res.header('Content-Transfer-Encoding', 'binary');
const repro = new Uint32Array([0x417055b8, 0x4177d16f, 0x4179e9da, 0x418660e1, 0x41770476, 0x4183e05e]);
i = 0;
setTimeout(function abc() {
res.write(Buffer.from(repro.buffer), 'binary');
i++;
if (i < 100) {
setTimeout(abc, 100);
} else {
res.end();
}
}, 100)
// I'm actually using spawn('command').pipe(res) here... So chunked response is required.
});
app.use(express.static('./node_modules/fetch-readablestream/dist/'))
app.use(express.static('./node_modules/web-streams-polyfill/dist/'))
app.listen(3000, () => console.log('Listening on port 3000!'));
现在它可以在 FF 上运行
以及 Chrome
你需要使用
https://www.npmjs.com/package/fetch-readablestream
我还使用了polyfillReadableStream in FF.
https://www.npmjs.com/package/web-streams-polyfill
但您可以通过更改 FF 配置文件首选项来启用相同的本机支持
添加到此处，以便将来可能对您或某人有所帮助