0

由于 .NET 6 Web API 支持 JSON 流，我们添加了额外的 API 端点并集成了我们所有的 React JS 项目以在我们的 Web 应用程序中读取 JSON 流。我们已经看到使用 JSON 流的所有地方都获得了巨大的性能提升。进展非常顺利。我们在 Web 应用程序中使用两种方法。他们都工作。

节点获取

import fetch from 'node-fetch';

const response = await fetch('https://httpbin.org/stream/3');

try {
    for await (const chunk of response.body) {
        console.dir(JSON.parse(chunk.toString()));
    }
} catch (err) {
    console.error(err.stack);
}

获取 API

  fetch('https://www.example.org').then(response => response.body)
    .then(rb => {
  const reader = rb.getReader();

  return new ReadableStream({
    start(controller) {
      // The following function handles each data chunk
      function push() {
        // "done" is a Boolean and value a "Uint8Array"
        reader.read().then( ({done, value}) => {
          // If there is no more data to read
          if (done) {
            console.log('done', done);
            controller.close();
            return;
          }
          // Get the data and send it to the browser via the controller
          controller.enqueue(value);
          // Check chunks by logging to the console
          console.log(done, value);
          push();
        })
      }

      push();
    }
  });
})
.then(stream => {
  // Respond with our stream
  return new Response(stream, { headers: { "Content-Type": "text/html" } }).text();
})
.then(result => {
  // Do things with result
  console.log(result);
});

仅供参考，本文中有一段视频展示了 JSON 流式传输的工作原理（https://anthonygiretti.com/2021/09/22/asp-net-core-6-streaming-json-responses-with-iasyncenumerable-example-带角/）

但是，在本机反应中，我们无法做到这一点。React Native 的 fetch API 只是等待整个 JSON 进入到 .then(response =>) 部分。它没有读取进来的块。我们尝试了以下第三方库，它们都没有在 React Native 中工作。

https://github.com/joltup/rn-fetch-blob

http://oboejs.com/

http://ndjson.org/

https://www.npmjs.com/package/stream-json

https://www.npmjs.com/package/JSONStream

https://www.npmjs.com/package/clarinet

有没有人成功实现在 React Native 中读取 JSON 流？

谢谢

4

0 回答 0