Javascript 将流块数据解析为JSON

嗨，我正试图在块中显示数据，因为我在块中获取数据

例如，让我们假设数据是这样的

data: {
user: [
    {
        name: 'a',
        bankAccounts: ['123', '234', '567'],
        address: ['some address', 'some other address', 'some more addres']
    },
    {
        name: 'b',
        bankAccounts: ['1233', '2334', '5637'],
        address: ['some address1', 'some other address1', 'some more addres1']
    },
    {
        name: 'c',
        bankAccounts: ['123355', '233455', '563700'],
        address: ['some address12', 'some other address12', 'some more addres12']
    },
]    
}

但我收到的那块是这样的

1st chunk: "data: user: [ {name: a"
2nd chunk: "bankAccounts: ['123', '234', '567'],"
3rd chunk: "address: ['some address', 'some other address', 'some more addres']"

and so on..

我接收分块数据的方式无法转换为json 因为它是不完整的

如何在UI中传输此数据

任何想法

My code for fetching streaming data

fetch('some url which stream data')
// Retrieve its body as ReadableStream
    .then(response => {
        const reader = response.body.getReader();
        let decoder = new TextDecoder();
        return new ReadableStream({
        start(controller) {
            return pump();
            function pump() {
                return reader.read().then(({ done, value }) => {
                    // When no more data needs to be consumed, close the stream
                    let newData = decoder.decode(value, {stream: !done});
                    console.log(newData);
                    if (done) {
                        controller.close();
                        return;
                    }
                    // Enqueue the next data chunk into our target stream
                    controller.enqueue(value);
                    return pump();
                });
            }
        }
    })
})
.then(stream => new Response(stream))
.then(response => {
    console.log('response', response)
})

您可以接受一个字符串（以空字符串开头）到您的函数

pump

，并继续追加它，直到出现块为止。在结束递归时，返回已解析的数据

const manager = require('./manager');

// manager.UpdateEC2Instances().then(console.log);
manager.UpdateRDSInstances().then(console.log);

fetch('some url which stream data')
    // Retrieve its body as ReadableStream
    .then(response => {
        const reader = response.body.getReader();
        let decoder = new TextDecoder();
        return new ReadableStream({
            start(controller) {
                return pump('');
                function pump(str) {
                    return reader.read().then(({ done, value }) => {
                        // When no more data needs to be consumed, close the stream
                        str += decoder.decode(value, { stream: !done });
                        console.log(str);
                        if (done) {
                            controller.close();
                            return JSON.parse(str);
                        }
                        // Enqueue the next data chunk into our target stream
                        controller.enqueue(value);
                        return pump(str);
                    });
                }
            }
        })
    })
    .then(stream => new Response(stream))
    .then(response => {
        console.log('response', response)
    })

---

我知道生成器不是很常用，但我觉得它们非常适合在这个任务中传输数据

异步函数*streamAsyncIterator（流）{
const reader=stream.getReader（）；
const decoder=新文本解码器（）；
while（true）{
const{done，value}=wait reader.read（）；
如果（完成）中断；
产生解码器.decode（值，{stream:！done}）；
}
读卡器。释放锁（）；
}
取（'https://httpbin.org/stream/1')
。然后（异步响应=>{
设str=“”；
用于等待（streamAsyncIterator（response.body）的常量值）
str+=值；
返回JSON.parse（str）；
})
。然后（响应=>{
console.log（'response'，response）
})

请参阅@Damian Nadales中更完整的讨论和示例。 如果你希望你的区块是完整的JSON，这根本不能保证，你可以使用

文本解码器将你的区块值（类型
Uint8Array
）解码成
UTF-8
。解码
，，然后使用
JSON.parse
解析JSON。例如：

var num = JSON.parse(
      new TextDecoder("utf-8").decode(result.value)
);

如果done为true，则您正在解析字符串，这不是流式处理，这与接收到整个数据时处理它是一样的，但我正在寻找处理分块数据处理分块数据是什么意思？你想用它做什么？您无法解析无效的JSON。即使某些区块是有效的，JSON也不应该这样做。处理意味着，在UI中显示区块数据，这样用户就不必等待更长的时间，但我无法显示它，因为我需要在jsonoh中解析它好的，不，你不能，用户将不得不等待，或者您可以更改API，只发送分页的用户数据，每个元素都在一个请求中，然后多次调用API。