Vue3+ts处理ai后端返回流式数据

renlmingj

2025 年 03 月 12 日

78 次浏览

暂无评论

1584字数

##### 一、使用 fetch 请求

##### 二、封装 ts 公共文件

```ts
const tokeninfo = JSON.parse(localStorage.getItem('token') || '{}');
const token = tokeninfo.access_token;
export async function fetchProxy(url: string, options: any = {}) {
  
  const response = await fetch(`/api${url}`, { // 手动添加代理前缀[6](@ref)
    ...options,
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    }
  })
  
  if (!response.ok) throw new Error(response.statusText)
  return response
}
```

##### 三、页面中使用

```ts
// 导入接口
import { fetchProxy } from '../utils/fetch';

const handleSearchUpdate = async (val: any) => {
  const body = {
    tagId: agentList.value,
    content: val
  }

const resp: any = await fetchProxy('/xxx', {
    method: 'POST',
    body: JSON.stringify(body),
  })

> 注：后端接口返回的 content-type 类型必须是 text/event-stream，否则不生效！！！

最后修改：2025 年 03 月 12 日