记录一下使用FastGpt
的心得
stream
模式#第一版使用了非stream
的调用模式
import axios from "axios";
const headers = {
Authorization: "Bearer fastgpt-API KEY",
"Content-Type": "application/json",
};
export const chatCompletions = (data: any) =>
axios.post("https://ai.cnhcym.com/api/v1/chat/completions", data, {
headers,
});
const [err, res] = await to(
chatCompletions({
chatId: this.messageId,
stream: false,
messages: [
{
role: "user",
content: [
{
type: "text",
text: "用户输入的内容",
},
],
},
],
})
);
if (res?.data?.choices?.length) {
// 对返回数据进行一系列操作
} else {
}
这种做法和平时写业务代码没有什么区别,一次性返回所有内容,但是用户等待结果的时间会很长很长,体验极差
steam
模式#为了提升用户体验(绝对不是因为我一开始没有看到有steam
模式),改用了steam
模式
try {
// 创建一个控制器,用于中止请求
const controller = new AbortController();
// 使用变量把控制器存储起来
this.request = controller;
const response = await fetch(
"https://ai.cnhcym.com/api/v1/chat/completions",
{
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "text/event-stream",
Authorization: "Bearer fastgpt-API KEY",
},
body: JSON.stringify({
chatId: this.messageId,
stream: true,
detail: true,
messages: [
{
role: "user",
content: [
{
type: "text",
text: "用户输入的内容",
},
],
},
],
}), // 请求体
signal: controller.signal, // 传递 signal 用于中止
}
);
if (!response.body) {
throw new Error("ReadableStream not supported in this browser.");
}
const reader = response.body.getReader(); // 获取流式数据的读取器
const decoder = new TextDecoder("utf-8");
while (true) {
const { done, value } = await reader.read(); // 逐块读取数据
if (done) break;
const result = decoder.decode(value, { stream: true }); // 解码流式数据
const [event, data] = result.split("\n");
// 返回值的类型
const eventType = event.replace("event: ", "");
// 返回值的内容
const info = getJSONToParse(data.replace("data: ", "")) as any;
if (eventType === "answer" && this.newMessage && info?.choices?.length) {
// 处理数据
}
}
} catch (error) {
} finally {
}