与chatgpt类似的聊天大模型,在请求接口之后的返回结果的Response headers里有content-type: text/event-stream; charset=utf-8。这表明返回的结果是eventStream,是利用SSE技术实现的。
要想在前端实现类似的流式返回文字的效果,可以用如下的代码
function = async () => {
try {
const response = await fetch("http://xxx.xxx.xxx.xxx:xxx/chat/chat", {
method: 'post',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(data),
})
const reader = response.body.getReader()
let data = ''
while (true) {
const {done, value} = await reader.read()
if (done) {
break
}
data += new TextDecoder().decode(value)
// data里的数据是流式返回结果
this.setState({outputWord: data})
}
} catch {
message.error('请求失败')
}
}