前端发送Fetch请求实现流式请求、模拟打字机效果等

本是古典何须时尚 2023-10-13 13:01 44阅读 0赞

*  前端需要接收后端的流式返回数据，并实时渲染。  
    普通的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可以返回一个对象，这个对象可以控制在连接失败时不要重试，直接关闭本次连接。

1.  onopen：建立连接的回调
2.  onmessage：接收一次数据段时回调，因为是流式返回，所以这个回调会被调用多次。
3.  onclose：正常结束的回调
4.  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透明度就可以实现光标闪烁的效果了。

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关前端发送Fetch请求实现流式请求、模拟打字机效果等

前端需要接收后端的流式返回数据，并实时渲染。普通的xhr请求都是等http协议数据包一次性返回之后才渲染，类似于ChatGPT的Http接口内容类型为tex

本是古典何须时尚/ 2023年10月13日 13:01/ 0 赞/ 45 阅读

相关前端使用fetch请求数据

使用fetch请求数据 created(){ fetch("http://localhost:8181/user/page?page

我就是我/ 2023年10月06日 22:12/ 0 赞/ 94 阅读

相关 fetch 发送 AJAX请求

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

悠悠/ 2023年10月06日 17:20/ 0 赞/ 159 阅读

相关 AJAX发送网络请求-封装AJAX-Fetch发送网络请求

文章目录 1.AJAX网络请求 1.1 AJAX发送请求 1.2 XHR的状态 1.3 XHR

秒速五厘米/ 2023年09月28日 13:49/ 0 赞/ 131 阅读

相关 java后端代码模拟前端发送websocket请求

怎么调用websocket作为通道发送数据 1.现有多个线程查询不同的设备获取不同的数据。 2.当网页打开后自动产生一个websocket连接。上面12两点已经完

朴灿烈づ我的快乐病毒、/ 2023年03月02日 07:56/ 0 赞/ 34 阅读

相关前端 - Fetch网络请求 - 学习/实践

1.应用场景 <table> <tbody> <tr> <td>主要用于前端向后端服务发送请求, 含跨域请求.</td> </tr> </tbod

墨蓝/ 2022年12月31日 15:21/ 0 赞/ 252 阅读

相关解析Fetch实现请求数据

![Image 1][] > 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很

谁践踏了优雅/ 2022年04月25日 00:34/ 0 赞/ 325 阅读

相关 postman模拟发送请求

题记：很多时候用postman总是会把一些请求搞混，网上的所有resuful都是说一些概念，今天闲在，把这块捋一下！捋一篇实用的！常用的状态码：网页服务器HTTP响应状

谁借莪１个温暖的怀抱￠/ 2022年02月04日 09:13/ 0 赞/ 649 阅读

相关 Fiddler模拟发送POST请求

在发起POST请求时不像GET请求可以在浏览器地址栏直接输入，POST请求的参数是放在请求体中的，因此如果想要模拟POST请求，需要借助工具，比如Postman或者Fiddle

素颜马尾好姑娘i/ 2022年01月30日 01:57/ 0 赞/ 417 阅读

相关 Postman模拟Request Payload发送请求

Postman模拟Request Payload发送请求，如下图所示： ![Center][] ![Center 1][] 另外补充下Postman中 form-dat

我不是女神ヾ/ 2021年12月11日 15:01/ 0 赞/ 865 阅读