vue 使用fetch-event-source 处理sse，实现ChatGpt逐字输出效果

最新推荐文章于 2025-04-30 18:29:49 发布

reembarkation

最新推荐文章于 2025-04-30 18:29:49 发布

阅读量1.3k

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/reembarkation/article/details/145456511

版权

1. 安装

npm install @microsoft/fetch-event-source

2. 引用

import { fetchEventSource } from "@microsoft/fetch-event-source";

3. 使用

  fetchEventSource('/api/chat', { 
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': '*/*',
          'Token': this.token,
        },
        body: JSON.stringify({  message: 'xxxx' }),
        openWhenHidden: true,
        signal: this.controller.signal,
        onmessage: (msg) => {
          sendAnswer.loading = false
          let data = msg.data
          // 异常信息
          if(data === '[EXCEEDED_QUOTE_LIMIT]'){
            let errorTip = "xxx！"
            this.$message.warning(errorTip)
          }
          // 消息正常接受中
          else if(data != '[DONE]') {
            try{
              let dataJson = JSON.parse(data) || {}
              let timer = setTimeout(()=>{
                if(sendAnswer.isStop) {
                  clearTimeout(timer)
                  return
                }
                sendAnswer.text += content
                clearTimeout(timer)
              }, times*that.treamStepGap)
            }catch (error) {}
          }
          // 消息接收完毕
          else if(data === '[DONE]') {
          console.log('connection closed')
          }
          times++
        },
        onclose: () => {
          console.log('connection closed')
        },
        onerror: (err) => {
          console.log(err)
        },
        onopen: (response) => {
          sendAnswer.text = ''
          return Promise.resolve()
        }
      })