前端接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 实现流式请求的示例代码：

// 初始化 AbortController 用于取消请求
const controller = new AbortController();
const { signal } = controller;

// 使用 Fetch 发起流式请求
fetch("your-endpoint-url", { data, signal })
  .then((response) => {
    // 确保响应是流式的
    if (!response.body)
      throw new Error("ReadableStream not yet supported in this browser.");

    const reader = response.body.getReader();
    const decoder = new TextDecoder("utf-8");
    let receivedLength = 0; // 接收到的字节数
    let chunks = []; // 用于存储数据块的数组

    // 读取流直到结束
    function readStream() {
      return reader.read().then(({ done, value }) => {
        if (done) {
          // 流已结束
          console.log("Stream complete");
          return chunks.join("");
        }
        chunks.push(decoder.decode(value, { stream: true }));
        receivedLength += value.length;
        console.log(`Received ${receivedLength} bytes of data so far`);
        return readStream();
      });
    }

    return readStream();
  })
  .then((data) => {
    // 处理完整的响应数据
    console.log("Full data:", data);
  })
  .catch((error) => {
    if (error.name === "AbortError") {
      console.log("Fetch aborted");
    } else {
      console.error("Fetch error:", error);
    }
  });

// 若要停止请求，可以调用以下函数
function stopFetchRequest() {
  controller.abort();
}

4.2 Axios 示例代码

以下是如何使用 Axios 实现 HTTP 流式请求的示例代码：

// 初始化取消令牌
let cancelTokenSource = axios.CancelToken.source();

// 使用 Axios 发起流式请求
// callback作为回调函数进行处理，每次都会返回之前所有已返回的数据
export function sendChatMessage(data, callback = () => {}) {
  return createCancelableRequest({
    baseURL: baseURL,
    url: "/v1/chat-messages",
    method: "post",
    responseType: "stream",
    headers: {
      Authorization: `Bearer ${API_TOKEN}`,
    },
    data,
    onDownloadProgress: callback,
  });
}
.then(response => {
 // 数据请求全部完成才会返回
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Axios request canceled', error.message);
  } else {
    console.error('Axios request error:', error);
  }
});

// 若要停止请求，可以调用以下函数
function stopAxiosRequest() {
  cancelTokenSource.cancel('Operation canceled by the user.');
}

// callback 示例
 const { responseText } = progressEvent.target
 // 获取新增的数据
 const newData = responseText.slice(buffer.length)
 buffer += newData

 // 按照数据块分割并解析
 const chunks = buffer.split("\n\n")
 buffer = chunks.pop() || "" // 缓存最后一个可能不完整的数据块

// 先清空你之前填进去的
 chatMessageList.value[currentIndex].answer = ""
 chatMessageList.value[currentIndex].think = ""

 // 处理每个完整的数据块
 chunks.forEach(async chunk => {
	//  处理每行数据
    chatMessageList.value[currentIndex].think += data.answer

     // 滚动到底部
     scrollToBottom()
 })