• 前端需要接收后端的流式返回数据，并实时渲染。
  普通的xhr请求都是等http协议数据包一次性返回之后才渲染，类似于ChatGPT的Http接口内容类型为text/event-stream。这种内容类型需要与浏览器建立持久连接并持续监听服务器返回的数据。

• npm 方式安装类库

npm install @microsoft/fetch-event-source
let controller = new AbortController()
        const eventSource = fetchEventSource(fetchUrl, {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(
              params
          signal: controller.signal,
          onopen() {
            console.log('open')
          onmessage(event) {
            console.log('onMessage',event.data)
            let data = event.data
            let jsonData = JSON.parse(data);
          onclose() {
            controller.abort();//出错后不要重试
            eventSource.close();
          onerror(error) {
            console.log('close',error)
            controller.abort();//出错后不要重试
            eventSource.close();
调用 fetchEventSource API可以返回一个对象，这个对象可以控制在连接失败时不要重试，直接关闭本次连接。
 
onopen：建立连接的回调
onmessage：接收一次数据段时回调，因为是流式返回，所以这个回调会被调用多次。
onclose：正常结束的回调
onerror：连接出现异常回调
 
onmessage的主要逻辑就是累加所有流式数据返回的内容，然后渲染到页面上，这里需要注意的是接口返回的为markdown格式的数据，所以还需要用到一个markdown转html的依赖库。
 
光标闪烁效果模拟
 
这里其实是用了一个span来模拟实现的
 
 const cursorFlaskStr = "<span id='cursorFlask' style='opacity:1;font-weight: bold'>|</span>"
      setInterval(() => {
        let cursorFlask = document.getElementById("cursorFlask");
        if (cursorFlask) {
          let opacity = cursorFlask.style.opacity;
          if (opacity && opacity.trim() == '0') {
            cursorFlask.style.opacity = '1'
          } else {
            cursorFlask.style.opacity = '0'
      }, 245)
这里的逻辑是每次监听到后端的流式数据以后，动态拼接上已有的字符串，然后将markdown转为html格式，然后继续拼接上这个span标签一起渲染到页面上，这个时候再开启个定时器，定时器获取到这个标签，动态的调整这个标签的opcatity透明度就可以实现光标闪烁的效果了。
                    这里的逻辑是每次监听到后端的流式数据以后，动态拼接上已有的字符串，然后将markdown转为html格式，然后继续拼接上这个span标签一起渲染到页面上，这个时候再开启个定时器，定时器获取到这个标签，动态的调整这个标签的opcatity透明度就可以实现光标闪烁的效果了。onmessage的主要逻辑就是累加所有流式数据返回的内容，然后渲染到页面上，这里需要注意的是接口返回的为markdown格式的数据，所以还需要用到一个markdown转html的依赖库。npm 方式安装类库。
				
详解使用fetch发送post请求时的参数处理
不考虑古董浏览器之后，使用fetch来发送ajax请求，变得非常爽快和时尚。
但是，发送post请求的时候，把笔者卡了一下。后台如下获取参数时，总是为null
String q = req.getParameter("q");
研究了好久，总算写出正确的使用方式了。直接上代码。
fetch("/search/project/", {
  method: "POST",
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  body: "q=参数q
相信大家应该都有所了解，在这个AJAX时代，如果想进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行一些异步请求时，都可以使用 fetch 进行完美的网络请求。下面话不多说，来一起看看详细的介绍吧。
先来看看各个浏览器对fetch的原生支持情况，可以看到支持性并不是很高，safari在10.1 之后才支持，ios更是10.3之后才支持，IE完全不支持。当然新技术的发展总会经历这个过程。
Ajax请求
普通的Ajax
				
流式请求：有的接口返回值包含有多个结果，而非常规的返回一个结果。比如查询接口，其返回值为排在前面固定数量的多个结果。
请求接口：http://httpbin.ors/streas/{n}
n表示返回结果集的数量，比如输入10则会返回10个不同id的结果，如下：
r = requests.get(base_url+'/stream/10')
print(r.text)
针对此类型接口，对结果集的处理需要使用iter_lines()迭代方法来处理。如下：
执行代码：
import requests
				
前端发送请求通常使用 XMLHttpRequest (XHR) 对象或者 fetch API。
XMLHttpRequest是一种浏览器提供的API，可以通过JavaScript发送HTTP请求和接收响应。使用XMLHttpRequest发送请求时，需要创建一个XMLHttpRequest对象，然后设置请求的方法、URL、请求头和请求体等参数，最后发送请求并处理响应。
fetch API是一种新的Web API，可以用于发送HTTP请求和接收响应。它使用Promise来处理异步操作，更加简洁易用。使用fetch API发送请求时，只需要传入请求的URL和请求配置对象即可，然后处理响应的Promise对象即可。
以下是使用XMLHttpRequest发送GET请求的示例代码：
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.send();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
以下是使用fetch API发送GET请求的示例代码：
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
需要注意的是，跨域请求时需要设置CORS或者使用代理等方式来解决跨域问题。