Question

我正在尝试使用fetch() API发出POST请求。按照this MDN page的建议，我将ReadableStream的实例作为请求正文传递。

ReadableStream对象不是从流中发布数据，而是仅转换为字符串（导致字符串[object ReadableStream]）并设置为请求正文（请参见下面的Wireshark框架）。

如何正确连接流API与提取？

注意：已在Chrome版本78.0.3904.87（官方内部版本）（64位）和Firefox 70.0.1（64位）中进行测试。

最小示例：

<html>
<head></head>
<body>
    <button id="btn">Button</button>
    <script>
        class StreamBuffer {

            constructor() {
                this.data = new Uint8Array(0);
                this.onChunk = null;
            }

            addBinaryData(uint8Array) {
                const newData = new Uint8Array(this.data.length + uint8Array.length);
                newData.set(this.data, 0);
                newData.set(uint8Array, this.data.length);
                this.data = newData;

                if (typeof this.onChunk === 'function') {
                    this.onChunk(this.data);
                    this.data = new Uint8Array(0);
                }
            }
        }

        class BufferedStream {
            constructor(streamBuffer) {
            const buffer = streamBuffer;

            this.readable = new ReadableStream({
                    start(controller) {
                        buffer.onChunk = chunk => controller.enqueue(chunk);
                        buffer.onClose = () => controller.close();
                    }
                });
            }
        }

        const button = document.querySelector('#btn');
        const buffer = new StreamBuffer();
        const readWriter = new BufferedStream(buffer);
        const readable = readWriter.readable;

        button.onclick = function() {
            var url = 'http://localhost:8080/endpoint';
            fetch(url, {method: "POST", body: readable});
        }

    </script>
</body>
</html>

来自Wireshark：

Frame 4: 412 bytes on wire (3296 bits), 412 bytes captured (3296 bits) on interface 0
Null/Loopback
Internet Protocol Version 6, Src: ::1, Dst: ::1
Transmission Control Protocol, Src Port: 55785, Dst Port: 8080, Seq: 1, Ack: 1, Len: 348
Hypertext Transfer Protocol
Line-based text data: text/plain (1 lines)
    [object ReadableStream]

Answer 1

我发现Chrome仍在实施此功能。参见this issue

使用提取API将ReadableStream与POST结合使用

1 个答案: