Vue实现Ai 聊天（流式请求处理和碰到的问题）

使用axios请求后，返回的数据是阻塞的，只能在最后拿到最终的结果，而不是流式

axios请求代码如下（无法实现流式效果）

axios.post('http://localhost:20000/opens/ai', {responseType: 'stream'}).then(response => {response.data.on('data', (chunk) => {console.log('数据读取：' + chunk)})response.data.on('end', () => {console.log('数据读取完成')})})

重点，使用fetch来替换axios

参考代码如下

async fetchData() {try {fetch('http://localhost:20000/opens/ai', {responseType: 'stream'}).then(async response =>  {const reader = response.body.getReader();const decoder = new TextDecoder('utf-8');while (true) {const { done, value } = await reader.read();if (done) break;const chunk = decoder.decode(value, { stream: true });this.streamedData += chunk;console.log('Received chunk:', chunk);}})} catch (error) {console.error('请求失败:', error);}},

注意fetch是浏览器自带的api，不需要引入第三方依赖。直接使用

另外作者主页中有个完整的全栈项目，有兴趣可以看看（进主页查看或者点击下方链接哦）

https://blog.csdn.net/weixin_52911459/article/details/135256041