前端接deepseek的流式接口怎样哀求？fetch和axios方案

流式哀求方案履历文档

1. 概述

1.1 配景

流式哀求是一种在数据传输过程中渐渐吸收数据的技能，适用于必要实时处理惩罚数据的场景。当前，DeepSeek 是一个热门的 AI 技能，许多开发者都在集成它。然而，流式的 Server-Sent Events (SSE) 方案似乎较少被接纳。本文档将先容怎样利用 Fetch 和 Axios 实现流式哀求，并处理惩罚吸收到的数据。
2. 利用 Fetch 进行流式哀求

2.1 哀求的实现

利用 Fetch API 进行流式哀求，通过 fetch 方法发送哀求，并利用 ReadableStream 渐渐处理惩罚响应数据。
2.2 数据处理惩罚

在吸收到数据块时，利用 TextDecoder 将数据块解码为字符串，并进行相应的处理惩罚。
2.3 停止哀求

通过 AbortController 控制器来停止当前的流式哀求。
3. 利用 Axios 进行流式哀求

3.1 哀求的实现

利用 Axios 进行流式哀求，通过 axios 方法发送哀求，并利用响应流渐渐处理惩罚数据。
3.2 数据处理惩罚

在吸收到数据块时，利用 response.data 处理惩罚数据，并进行相应的处理惩罚。
3.3 停止哀求

通过取消令牌CancelToken来停止当前的流式哀求。
4. 案例代码

4.1 Fetch 示例代码

以下是怎样利用 Fetch API 实现流式哀求的示例代码：

1. // 初始化 AbortController 用于取消请求
2. const controller = new AbortController();
3. const { signal } = controller;
5. // 使用 Fetch 发起流式请求
6. fetch("your-endpoint-url", { data, signal })
7.   .then((response) => {
8.     // 确保响应是流式的
9.     if (!response.body)
10.       throw new Error("ReadableStream not yet supported in this browser.");
12.     const reader = response.body.getReader();
13.     const decoder = new TextDecoder("utf-8");
14.     let receivedLength = 0; // 接收到的字节数
15.     let chunks = []; // 用于存储数据块的数组
17.     // 读取流直到结束
18.     function readStream() {
19.       return reader.read().then(({ done, value }) => {
20.         if (done) {
21.           // 流已结束
22.           console.log("Stream complete");
23.           return chunks.join("");
24.         }
25.         chunks.push(decoder.decode(value, { stream: true }));
26.         receivedLength += value.length;
27.         console.log(`Received ${receivedLength} bytes of data so far`);
28.         return readStream();
29.       });
30.     }
32.     return readStream();
33.   })
34.   .then((data) => {
35.     // 处理完整的响应数据
36.     console.log("Full data:", data);
37.   })
38.   .catch((error) => {
39.     if (error.name === "AbortError") {
40.       console.log("Fetch aborted");
41.     } else {
42.       console.error("Fetch error:", error);
43.     }
44.   });
46. // 若要停止请求，可以调用以下函数
47. function stopFetchRequest() {
48.   controller.abort();
49. }

复制代码

4.2 Axios 示例代码

以下是怎样利用 Axios 实现 HTTP 流式哀求的示例代码：

1. // 初始化取消令牌
2. let cancelTokenSource = axios.CancelToken.source();
4. // 使用 Axios 发起流式请求
5. // callback作为回调函数进行处理，每次都会返回之前所有已返回的数据
6. export function sendChatMessage(data, callback = () => {}) {
7.   return createCancelableRequest({
8.     baseURL: baseURL,
9.     url: "/v1/chat-messages",
10.     method: "post",
11.     responseType: "stream",
12.     headers: {
13.       Authorization: `Bearer ${API_TOKEN}`,
14.     },
15.     data,
16.     onDownloadProgress: callback,
17.   });
18. }
19. .then(response => {
20. // 数据请求全部完成才会返回
21. })
22. .catch(error => {
23.   if (axios.isCancel(error)) {
24.     console.log('Axios request canceled', error.message);
25.   } else {
26.     console.error('Axios request error:', error);
27.   }
28. });
30. // 若要停止请求，可以调用以下函数
31. function stopAxiosRequest() {
32.   cancelTokenSource.cancel('Operation canceled by the user.');
33. }
35. // callback 示例
36. const { responseText } = progressEvent.target
37. // 获取新增的数据
38. const newData = responseText.slice(buffer.length)
39. buffer += newData
41. // 按照数据块分割并解析
42. const chunks = buffer.split("\n\n")
43. buffer = chunks.pop() || "" // 缓存最后一个可能不完整的数据块
45. // 先清空你之前填进去的
46. chatMessageList.value[currentIndex].answer = ""
47. chatMessageList.value[currentIndex].think = ""
49. // 处理每个完整的数据块
50. chunks.forEach(async chunk => {
51.         //  处理每行数据
52.     chatMessageList.value[currentIndex].think += data.answer
54.      // 滚动到底部
55.      scrollToBottom()
56. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。