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

这篇具有很好参考价值的文章主要介绍了前端发送Fetch请求实现流式请求、模拟打字机效果等。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端需要接收后端的流式返回数据，并实时渲染。
普通的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透明度就可以实现光标闪烁的效果了。文章来源地址https://www.toymoban.com/news/detail-535612.html

到了这里，关于前端发送Fetch请求实现流式请求、模拟打字机效果等的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！