[Javascript] Refactor blocking style code to stream style for fetching the stream data

When you use ChatGPT, the response comes in stream, so that it can appears on screen whenever data come back from server, we don't need to wait all data completed then showing the data to users.

 

Here is code which need to be improved, because this code blocking the thread and wait all the data comes back when showing to the screen.

const url = "http://localhost:3000/chat";

async function getResponse(content) {
  const resp = await fetch(url, {
    method: "POST",
    body: JSON.stringify({ content }),
    headers: {
      "Content-Type": "application/json",
    },
  });
  const data = await resp.text();
  console.log(data);
}

 

First we need to understand where the blocking happens?

const data = await resp.text();

 

Then how to resolve this issue? 

We need to convert to stream style, when you check resp.body, you can see the type of it is Body.body: ReadableStream<Uint8Array>

const url = "http://localhost:3000/chat";

async function getResponse(content) {
  const resp = await fetch(url, {
    method: "POST",
    body: JSON.stringify({ content }),
    headers: {
      "Content-Type": "application/json",
    },
  });

  const reader = resp.body.getReader();
  const decoder = new TextDecoder();
  while (1) {
    const { done, value } = await reader.read();
    const text = decoder.decode(value);
    console.log(text);
    if (done) {
      break;
    }
  }
}

 

posted @   Zhentiw  阅读(4)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2023-08-25 [Algorithm] LRU Cache
2020-08-25 [React] Styled System with extendable Box element
2019-08-25 Define Interfaces and Share Class Members through Mixins in Dart
2019-08-25 [Dart] Understand Classes and Inheritance in Dart
2016-08-25 [WebGL] Setting Up WebGL
2016-08-25 [Redux] Accessing Dispatch and State with Redux -- connect
2015-08-25 [Angular 2] 8. Better ES5 Code
点击右上角即可分享
微信分享提示