fetch 文件流_使用Fetch（）和NDJSON流数据

忘是亡心i 2023-02-22 01:26 12阅读 0赞

fetch 文件流

> \*"If you stream it, you can do it" -- Walt Disney\[^1\] \*
> 
> \*“如果您流式传输，就可以做到”-沃尔特·迪斯尼\[^ 1\] \*

Streams are trickling into the scene as we search for ways to improve performance. What if instead of waiting for our *entire* ajax response to complete, we could start showing the data as it arrives?

当我们寻找提高性能的方法时，信息流正在滴入现场。 如果不用等待我们的*整个* ajax响应完成，而是可以在数据到达时开始显示数据呢？

Streams allow us to do this. They are a data source that can be created and processed incrementally. This means as chunks of data become available, we are able to do work on them right away.

流允许我们执行此操作。 它们是可以增量创建和处理的数据源。 这意味着随着大量数据的可用，我们能够立即对其进行处理。

Using the [Fetch API][] with a data format called [NDJSON][] that breaks larger JSON objects into smaller JSON objects delimitated by newline characters, we are able to receive a stream of smaller chunks of JSON data as a stream. As our NDJSON data is streaming in, we can start processing and rendering right away. This makes users happy because they are able to see things sooner and developers happy because it increases overall performance. If you tie all of this in with service workers, then you can really see the [improvements in performance][].

使用[Fetch API][]和称为[JSONJSON][NDJSON]的数据格式将较大的JSON对象分解为由换行符分隔的较小的JSON对象，我们就可以接收较小的JSON数据块流。 随着我们的NDJSON数据流入，我们可以立即开始处理和渲染。 这使用户感到高兴，因为他们能够更快地看到事物，而开发人员则感到高兴，因为它提高了整体性能。 如果将所有这些与服务人员联系在一起，那么您真的可以看到[性能方面的改进][improvements in performance] 。

[![incremental NDJSON rending vs. JSON object][]][incremental NDJSON rending vs. JSON object]

###  用法示例 **(**Example Usage**)** ###

As seen below, you can use `fetch()` with an endpoint that sends NDJSON to start manipulating and rendering that data line-by-line as you receive it.

如下所示，您可以将`fetch()`与发送NDJSON的端点一起使用，以在接收到数据时开始逐行处理和呈现该数据。

[![streaming json process][]][streaming json process]

Sounds like a win-win, but what is the catch? Well, there are packages out there on npm such as [ndjson][] that serializes JSON to NDJSON, but we don’t have an easy way to deserialize NDJSON to a stream of JavaScript objects… until now!

听起来像双赢，但有什么收获呢？ 那么，有包在那里上NPM如[ndjson][]序列化JSON来NDJSON，但我们没有一个简单的方法来反序列化NDJSON到JavaScript的一个流对象...到现在为止！

##  介绍can-ndjson-stream **(**Introducing can-ndjson-stream**)** ##

[can-ndjson-stream][] is a simple JavaScript module that does the heavy lifting of serializing your NDJSON stream into a [ReadableStream][] of JavaScript objects. Use this just as you would JSON.parse with a JSON object.

[can-ndjson-stream][]是一个简单JavaScript模块，可以很轻松地将NDJSON流序列化为JavaScript对象的[ReadableStream][] 。 就像使用JSON对象进行JSON.parse一样使用它。

[![ndjson streaming db row][]][ndjson streaming db row]

Follow these simple steps to use the `can-ndjson-stream` module.

请按照以下简单步骤使用`can-ndjson-stream`模块。

//1. require the can-ndjson-stream module
    import ndjsonStream from 'can-ndjson-stream';
    
    //2. pass the NDJSON stream response body to the ndjsonStream function. Typically, this would be used with the fetch() method.
    
    const readableStream = ndjsonStream(response.body);  
    //3. use readableStream, which is now a ReadableStream of JS objects, however you like. The ReadableStream API exposes a .getReader() and .cancel() method.
    
    //https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream

###  入门 **(**Getting Started**)** ###

####  1.从npm下载该软件包并将其保存到您的项目中。 **(**1. Download the package from npm and save it to your project.**)** ####

npm i can-ndjson-stream --save

####  2.像在每个文件顶部的典型npm模块那样导入模块。 **(**2. Import the module as you would a typical npm module at the top of each file.**)** ####

Require `var ndjsonStream = require('can-ndjson-stream');`

要求`var ndjsonStream = require('can-ndjson-stream');`

\-- OR --

\- 要么 -

ES6 import `import ndjsonStream from 'can-ndjson-stream';`

ES6 import `import ndjsonStream from 'can-ndjson-stream';`导入`import ndjsonStream from 'can-ndjson-stream';`

####  3.使用`ndjsonStream`函数解析您的`response.body`并处理结果。 **(**3. Parse your `response.body` using the `ndjsonStream` function and do work on the result.**)** ####

Once you parse your `response.body`, you can interact with your ReadableStream by `read`'ing it like this: `exampleStream.getReader().read()`. That will return a promise that resolves to one line of your NDJSON.

一旦解析了`response.body` ，就可以通过`read`与ReadableStream进行交互： `exampleStream.getReader().read()` 。 这将返回一个承诺，该承诺将解析为NDJSON的一行。

####  使用异步/等待 **(**Using Async/Await**)** ####

import ndjsonStream from 'can-ndjson-stream';
    
    const fetchNdjson = async () => {
      const response = await fetch("/api");
      const exampleReader = ndjsonStream(response.body).getReader();
    
      let result;
      while (!result || !result.done) {
        result = await exampleReader.read();
        console.log(result.done, result.value); //result.value is one line of your NDJSON data
      }
    }

####  兑现承诺 **(**Using promises**)** ####

import ndjsonStream from 'can-ndjson-stream';
    
    fetch('/api')  // make a fetch request to a NDJSON stream service
    .then((response) => {
    	return ndjsonStream(response.body); //ndjsonStream parses the response.body
    
    }).then((exampleStream) => {
    	let read;
    	exampleStream.getReader().read().then(read = (result) => {
    		if (result.done) return;
    		console.log(result.value);
    
    		exampleStream.getReader().read().then(read); //recurse through the stream
    	});
    });

####  4. \[可选\]创建一个简单的API来提供示例NDJSON数据。 **(**4. \[Optional\] Create a simple API to serve sample NDJSON data.**)** ####

Follow [this tutorial][] on the Bitovi blog that gets you started or take a look at the demo in [the can-ndjson-stream repo][].

跟随Bitovi博客上的[本教程][this tutorial]开始学习，或查看[can-ndjson-stream repo][the can-ndjson-stream repo]中的演示。

###  接下来是什么？ **(**What next?**)** ###

If you enjoyed this article, [tweet to us][] how you plan to use this module! Also check out the rest of the [CanJS library][]. If you need any help, please don’t be afraid to leave a comment below or ask questions in the [CanJS Gitter][] or [forums][]!

如果您喜欢本文，请[向我们发送推特，][tweet to us]您打算如何使用此模块！ 还要检查其余的[CanJS库][CanJS library] 。 如果您需要任何帮助，请不要害怕在下面发表评论或在[CanJS Gitter][]或[论坛中][forums]提问！

####  关于历史流的励志名言\[^ 1\] **(**Inspirational Quotes about Streams Through History\[^1\]**)** ####

> If not us, who? If not now, when? -- John F. Kennedy
> 
> 如果不是我们，谁呢？ 如果不是现在，那是什么时候？ 约翰·肯尼迪

> Hope is a waking stream. -- Aristotle
> 
> 希望是清醒的溪流。 -亚里斯多德

> Life is trying things to see if they work. -- Ray Bradbury
> 
> 生活在尝试事物，看它们是否起作用。 -雷·布拉德伯里(Ray Bradbury)

\[^1\]: may or may not be accurate.

\[^ 1\]：可能准确也可能不准确。

\[^2\]: [NDJSON][NDJSON 1] stands for newline delimited JSON. Each newline character in a file separates that line into individual JSON objects enabling us to stream many smaller chunks of JSON rather than one large JSON object.

\[^ 2\]： [NDJSON][NDJSON 1]代表换行符分隔的JSON。 文件中的每个换行符都会将该行分成单独的JSON对象，使我们能够流式传输许多较小的JSON块，而不是一个大的JSON对象。

> 翻译自: [https://davidwalsh.name/streaming-data-fetch-ndjson][https_davidwalsh.name_streaming-data-fetch-ndjson]

fetch 文件流

[Fetch API]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[NDJSON]: http://ndjson.org
[improvements in performance]: https://jakearchibald.com/2016/streams-ftw/
[incremental NDJSON rending vs. JSON object]: https://camo.githubusercontent.com/1f6cdb22fdcdfae0fa244410f36a684f34aadf9d/68747470733a2f2f676973742e6769746875622e636f6d2f6267616e646f2f39336261396339613462653639613837366133633162663464323766386132632f7261772f663834336535633161613839666637393661346561623133616136383231353765383831363562642f6e646a736f6e2d73747265616d2d6a736f6e2e676966
[streaming json process]: https://camo.githubusercontent.com/ddb0b09f830c8df103509ab34bea547c6f906d94/68747470733a2f2f676973742e6769746875622e636f6d2f6267616e646f2f39336261396339613462653639613837366133633162663464323766386132632f7261772f663834336535633161613839666637393661346561623133616136383231353765383831363562642f73747265616d2d70726f636573732d76302e352e676966
[ndjson]: https://www.npmjs.com/package/ndjson
[can-ndjson-stream]: https://canjs.com/doc/can-ndjson-stream.html
[ReadableStream]: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream
[ndjson streaming db row]: https://camo.githubusercontent.com/33b41fd71586d994450b1f23a5ab4d1f1e840c98/68747470733a2f2f676973742e6769746875622e636f6d2f6267616e646f2f39336261396339613462653639613837366133633162663464323766386132632f7261772f663834336535633161613839666637393661346561623133616136383231353765383831363562642f6e646a736f6e2d73747265616d2d7365727665722d636f64652e676966
[this tutorial]: http://www.bitovi.com/blog/faster-page-loads-how-to-use-ndjson-to-stream-api-responses
[the can-ndjson-stream repo]: http://bit.ly/can-ndjson-stream
[tweet to us]: https://twitter.com/intent/tweet?text=ndjsonStream%20is%20awesome%20@bitovi!
[CanJS library]: https://canjs.com/
[CanJS Gitter]: https://gitter.im/canjs/canjs
[forums]: http://forums.donejs.com/c/canjs
[NDJSON 1]: http://ndjson.org/
[https_davidwalsh.name_streaming-data-fetch-ndjson]: https://davidwalsh.name/streaming-data-fetch-ndjson