前端如何处理AI模型返回的流数据

1.首先，使用什么请求方式

这里采用的是fetch请求方式获取流数据。 Fetch 支持可读流，适用于大文件下载。

代码示例：

javascript 复制代码

fetch(import.meta.env.VITE_AI_API + "/ai/task/stream", {
    method: 'post',
    body: JSON.stringify(params),
    headers: {
      "Content-Type": "application/json",
    },
  }).then(respose => {
    if (respose.status === 200) {
      return respose.body
    }
  })
    .then(rb => {
      return promiseHandleReader(rb!.getReader())
    })
    .catch(error => {
      console.log("error is ", error)
      btnLoading.value =  false
      spinning.value = false
      message.error('生成失败！')
    })

2.流数据

ai模型返回的流数据如下：

3.如何从流数据里获取最后完整的json数据

需要注意的是，ai模型每次返回的流数据，里面有个text字段，正如上图中的text属性。然后是将不断输出的text字段，拼接出一个完整的json数据。那么如何拼接出一个完整的json呢？代码如下

javascript 复制代码

const topicJson = ref('')
const topicInfoObj = ref({})
let streamString = '' // 所有流式输出的拼接

function promiseHandleReader(reader) {
  return new Promise((resolve, reject) => {
    loopRead(reader, resolve, reject)
  }).then(() => {// 读取完所有流数据后，开始处理
    const resArr = extractDataBetween(streamString)
    const resArrNoEmpty = resArr.filter(item => !!item)
    resArrNoEmpty.forEach(item => {
      const obj = JSON.parse(item)
      topicJson.value += obj.result.output.text
    })
    topicInfoObj.value = JSON.parse(topicJson.value)

  })
    .catch(err => {
      console.log(err);
    })
}

// 递归读取流数据
function loopRead(reader, resolve, reject) {
  return reader.read().then(({ done, value }) => {
    if (done) {
      resolve(true)
      return
    }
    const decodeString = new TextDecoder().decode(value)
    streamString += decodeString
    return loopRead(reader, resolve, reject)
  })
}

// 处理所有流式数据拼接的完整数据，取出data:规则后的字符数据
function extractDataBetween(str: string) {
  const regex = /data:([\s\S]*?)(?=data:|$)/g;
  const result = [];
  let match;

  // 循环匹配所有符合条件的内容
  while ((match = regex.exec(str)) !== null) {
    // 将分组1的内容加入数组（即data:后面的分段内容）
    result.push(match[1]);
  }

  return result;
}

async function handleGenerateTopic() {
  topicJson.value = ''
  streamString = ''
  const params = {...} // 参数
  fetch(import.meta.env.VITE_AI_API + "/ai/task/stream", {
    method: 'post',
    body: JSON.stringify(params),
    headers: {
      "Content-Type": "application/json",
    },
  }).then(respose => {
    if (respose.status === 200) {
      return respose.body
    }
  })
    .then(rb => {
      return promiseHandleReader(rb!.getReader())
    })
    .catch(error => {
      console.log("error is ", error)
      message.error('生成失败！')
    })
}