调用chatGPT流式接口

vayne_1

已于 2023-06-08 16:12:28 修改

阅读量176

点赞数

分类专栏： vue 文章标签： chatgpt javascript 开发语言前端 vue.js

于 2023-04-27 16:17:55 首次发布

本文链接：https://blog.csdn.net/vayne_1/article/details/130409268

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近公司业务需要调用chatGPT流式接口，记录一下

// 使用xhr调用
var xhr = new XMLHttpRequest();
  xhr.open("post", "/"); // 这里写具体接口，可以代理
  xhr.setRequestHeader("Content-Type", "text/event-stream");  // 使用 text/event-stream  请求头

  xhr.onprogress = function(event) {
      console.log(event.currentTarget.responseText);
      let str = ''
      // 这里就可以获取到流式数据了
      let data = event.currentTarget.responseText
      data = data.split('data: {\"answer\":\"').slice(1, data.length -1)
      data.forEach(item => {
        if(item.includes('\\n')) return str += '<br>'
        item = item.replace(/("})\\n\\n/g, '').replace(/}/g, '').replace(/"/g, '')
        str += item
      })
      datas.value[datas.value.length -1].answer = str
      loading.value = false
      element.scrollTop = element.scrollHeight;
      msg.value = ''
  };

  xhr.send(JSON.stringify({prompt: msg.value})); // 发送数据，要用JSON.stringify包裹