前端处理流式数据

参考

    // 流式加载
    async fetchData() {
      let self = this
      await fetch(
        baseUrl +
          '/biz-api/eemp/ldas/v1/chatApi/DeepSearchChat?searchType=' +
          self.searchIndex +
          '&question=' +
          self.messageWord,
        {
          method: 'GET',
          headers: {
            Authorization: sessionStorage.getItem('accessToken') || localStorage.getItem('accessToken'),
            'Content-Type': 'text/event-stream;charset=utf-8'
          }
        }
      ).then((response) => {
        const reader = response.body.getReader()
        let mesObj = {
          recipient_id: 'user',
          text: '',
          docs: [],
          type: '',
          daily: '',
          cityName: '',
          speak: false,
          feedBcak: -1,
          isLoading: false
        }
        // 创建用于解码文本的解码器
        const decoder = new TextDecoder('utf-8')
        const stream = new ReadableStream({
          async start(controller) {
            while (true) {
              // 从数据读取器中读取数据
              const { done, value } = await reader.read()
              // 如果读取完成，关闭控制器并退出循环
              if (done) {
                controller.close()
                break
              }
              // 解码值并将其附加到指定ID的消息内容中
              const match = decoder.decode(value, { stream: true })
              if (match) {
                try {
                  if (JSON.parse(match).code === 200) {
                    // 系统自查
                    self.dataDeal(JSON.parse(match), mesObj)
                  }
                } catch (error) {
                  // 大模型分析
                  self.deepDataDeal(match, mesObj.text, mesObj)
                }
              }
            }
          }
        })
        // 显示答案
        self.messageLIsts.splice(self.messageLIsts.length - 1, 1)
        self.messageLIsts.push(mesObj)
        self.scrollTo()

        // 保存deep问答
        self.messageLIstsDeep = [...self.messageLIsts]
        sessionStorage.setItem('messageLIstsDeep', JSON.stringify(self.messageLIstsDeep))
      })
    },
    // 系统自查数据包装
    dataDeal(res, mesObj) {
      let answer = ''
      console.log('res.data.type', res.data.type)
      if (res.data.type === 'ranks') {
        let obj = JSON.parse(res.data.msg)
        console.log('obj.echarts', obj)
        mesObj.text = obj.content
        mesObj.echarts = obj.echarts
        mesObj.type = 'ranks'
        return
      }
      let msgType = ['weather', 'rank', 'quality', 'deepSearchChat', 'task', 'siteAlarm']
      if (msgType.includes(res.data.type)) {
        answer = res.data.msg
      }
      mesObj.text = answer
    },
    // 大模型分析数据包装
    deepDataDeal(match, newStr, mesObj) {
      let _self = this
      const chunks = match.trim().split('\n\n')
      chunks.forEach((chunk) => {
        const jsonString = chunk.replace('data: ', '')
        try {
          const data = JSON.parse(jsonString)
          const content = data.choices[0].delta.content.replace('\n\n', '').replace('###', '\n')
          // const content = data.choices[0].delta.content

          if (content) {
            newStr = newStr + content
            mesObj.text = newStr
            _self.scrollTo()
          }
        } catch (error) {
          // console.error('Error parsing JSON:', error)
        }
      })
    }```