轻松掌握：JavaScript如何高效接收HTTP输出流

在处理网络请求时，JavaScript 提供了多种方式来接收HTTP输出流。对于大型文件传输或者需要实时数据的场景，使用输出流是一种高效的方法。以下是几种在JavaScript中高效接收HTTP输出流的方法。

1. 使用 fetch API

fetch 是现代浏览器提供的原生网络请求API，它支持Promise，使得异步编程更加简洁。

示例：

async function fetchStream(url) {
    const response = await fetch(url, { method: 'GET' });

    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }

    return response.body;
}

fetchStream('https://example.com/stream')
    .then((body) => {
        return new ReadableStream({
            start(controller) {
                function push() {
                    body.getReader().read().then(({ done, value }) => {
                        if (done) {
                            controller.close();
                            return;
                        }
                        controller.enqueue(value);
                        push();
                    }).catch((error) => {
                        console.error('Failed to read the stream', error);
                        controller.error(error);
                    });
                }

                push();
            }
        });
    })
    .then((stream) => {
        return new Response(stream);
    })
    .then((response) => {
        return response.text();
    })
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error('Failed to fetch the stream', error);
    });

2. 使用 XMLHttpRequest 对象

对于不支持 fetch API 的旧版浏览器，可以使用 XMLHttpRequest。

示例：

function xhrStream(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);

        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    const reader = xhr.responseBody.getReader();
                    const stream = new ReadableStream({
                        start(controller) {
                            function push() {
                                reader.read().then(({ done, value }) => {
                                    if (done) {
                                        controller.close();
                                        return;
                                    }
                                    controller.enqueue(value);
                                    push();
                                }).catch((error) => {
                                    console.error('Failed to read the stream', error);
                                    controller.error(error);
                                });
                            }

                            push();
                        }
                    });
                    resolve(stream);
                } else {
                    reject(new Error(`HTTP error! status: ${xhr.status}`));
                }
            }
        };

        xhr.send();
    });
}

xhrStream('https://example.com/stream')
    .then((stream) => {
        return new Response(stream);
    })
    .then((response) => {
        return response.text();
    })
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error('Failed to fetch the stream', error);
    });

3. 使用 WebSockets

如果你的应用需要实时通信，WebSockets 是一个不错的选择。它允许在建立连接后进行双向通信。

示例：

function wsStream(url) {
    return new Promise((resolve, reject) => {
        const ws = new WebSocket(url);

        ws.onmessage = function (event) {
            const reader = new Response(event.data).body.getReader();
            const stream = new ReadableStream({
                start(controller) {
                    function push() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                controller.close();
                                return;
                            }
                            controller.enqueue(value);
                            push();
                        }).catch((error) => {
                            console.error('Failed to read the stream', error);
                            controller.error(error);
                        });
                    }

                    push();
                }
            });
            resolve(stream);
        };

        ws.onerror = function (error) {
            reject(error);
        };
    });
}

wsStream('wss://example.com/stream')
    .then((stream) => {
        return new Response(stream);
    })
    .then((response) => {
        return response.text();
    })
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error('Failed to fetch the stream', error);
    });
}

这些方法都是高效的，但根据具体的应用场景和需求，你可能需要选择最适合你的方法。希望这篇文章能帮助你更好地理解如何在JavaScript中高效接收HTTP输出流。