数据的流式获取

46 阅读2分钟

前言

此功能类似于GTP一样一点一点的解析数据,不需要等到所有数据都返回才解析,这个是回来多少解析多少。当服务器响应内容很多的时候,需要等待很长时间才能收到响应完成的结果的时候可以考虑使用流的方式一部分一部分的接收,这样客户端的界面不至于长时间处于空白状态。

代码

   const url = "http://localhost:7010/chat";
   async function getResponse = (content) {
       const resp = await fetch(url, {
           method: "POST",
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ content })
       })
       const reader = resp.body.getReader();
       while(1) {
           
           const { done, value } = reader.read()
           if (done) {
               break;
           }
       
           const decoder = new TextDecoder(value)
           const text = decoder.decode(value);
       }
       
       console.log("读完了")
   }

TextDecoder

TextDecoder接口表示一个文本解码器,一个解码器只支持一种特定文本编码,例如UTF-8、ISO-8859-2、KOI8-R、GBK,等等。解码器将字节流作为输入,并提供码位流作为输出。 备注:此特性在Web Worker中可用

getReader

ReadableStream接口的getReader()方法会创建一个reader,并将流锁定。只有当前reader将流释放后,其他reader才能使用。

fetch

Fetch API提供了一个JavaScript接口,用于访问和操纵HTTP管道的一些具体部分,例如请求和响应。它还提供了一个全局fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。 这种功能以前是使用XMLHttpRequest实现的。Fetch提供了一个更理想的替代方案,可以很容易地被其他技术使用,例如Service Workers。Fetch还提供了专门的逻辑空间来定义其他与HTTP相关的概念,例如CORS和HTTP的扩展。 请注意,fetch规范与jQuery.ajax()主要有以下的不同: 当接收到一个代表错误的HTTP状态码时,从fetch()返回的Promise不会被标记为reject,即使响应的HTTP状态码是404或500。相反,它会将Promise状态标记为resolve(如果响应的HTTP状态码不在200-299的范围内,则设置 resolve返回值的ok属性为false),仅当网络故障时或请求被阻止时,才会标记为reject。 fetch不会发送跨域cookie,除非你使用了credentials的初始化选项。