使用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