uni.request 配置流式接收+通义千问实现多轮对话

1. 配置基础的uni.request服务

ts 复制代码
// 基础URL
const baseUrl = 'localhost:3000';

// 扩展请求方法参数,新增 headers 配置
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';

// 通用请求函数(新增 headers 参数)
const request = (
  url: string,
  method: Method,
  data?: any,
  headers?: Record<string, string>
) => {
  return new Promise((resolve, reject) => {
    const fullUrl = url.startsWith('http') ? url : `${baseUrl}${url}`;

    // 合并默认 header 和自定义 header
    const mergedHeaders: Record<string, string> = {
      'Content-Type': 'application/json', // 默认保留
      ...headers, // 合并自定义 header(可覆盖默认值)
    };
    // 创建一个请求task
    const requestTask = uni.request({
      url: fullUrl,
      method: method,
      data: data,
      header: mergedHeaders, // 使用合并后的 header
      enableChunked: true,
      success: (res) => {
        resolve(res);
      },
      fail: (err) => {
        reject(err);
      },
    });

    // 返回一个包含流式处理方法的对象
    resolve({
      onHeadersReceived: (callback: (headers: any) => void) => {
        requestTask.onHeadersReceived((res) => {
          callback(res.header);
        });
      },
      onChunkReceived: (callback: (chunk: any) => void) => {
        (requestTask as any).onChunkReceived((res: any) => {
          callback(res.data);
        });
      },
      abort: () => {
        requestTask.abort();
      },
    });
  });
};


// GET请求方法(保持原有参数)
const get = (url: string, data?: any) => {
  return request(url, 'GET', data);
};

// POST请求方法(新增 headers 参数)
const post = (url: string, data: any, headers?: Record<string, string>) => {
  return request(url, 'POST', data, headers);
};

// 导出GET和POST方法
export { get, post };

2.编程专属的ai请求文件

ts 复制代码
// 引入基础请求方法
import { post } from './api.config';
import { SSEHandler } from "@/types/baseType";
const accessToken = 'sk-xxx';
export const callAliyunAI = async (userInput: string, history: Array<{ role: string, content: string }> = []): Promise<SSEHandler> => {
  const url = 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions';
  const headers = {
    'Authorization': `Bearer ${accessToken}`,
    // 'Content-Type': 'text/event-stream',
    // 'Cache-Control': 'no-cache',
    'X-DashScope-SSE': 'enable',
    // 'Coneection': 'keep-alive'
  };
  const messages = [
    ...history, // 添加历史对话记录
    {
      role: "user",
      content: userInput // 当前用户输入
    }
  ];
  const data = {
    model: 'qwen-plus',
    messages: messages,
    stream: true,
  };

  try {
    const response = await post(url, data, headers);
    return response as SSEHandler;
  } catch (error: any) {
    throw new Error(`调用AI模型失败: ${error.message}`);
  }
};
  1. 页面中多轮对话关键代码
ts 复制代码
// 发送消息
const sendMessage = async () => {
  if (input.value.trim() !== "") {
    messages.value.push({ role: "user", content: input.value });
    const userInput = input.value;
    input.value = "";
    try {
      // 调用 AI 接口,传入用户输入
      const sseHandler = await callAliyunAI(userInput, messages.value);
      sseHandler.onHeadersReceived((headers: Record<string, string>) => {
        console.log("响应头:", headers);
      });

      // // 处理流式数据
      sseHandler.onChunkReceived((chunk: ArrayBuffer) => {
        console.log("接收到数据:", chunk);
        parseData(chunk); // 数据解析 并填充到对话框
      });
    } catch (error) {
      console.error("调用AI模型失败:", error);
      messages.value.push({
        role: "system",
        content: "调用AI模型失败,请重试。",
      });
    }
  }
};

//  解析函数
const parseData = (data: ArrayBuffer) => {
  // 将 ArrayBuffer 转换为字符串
  const decoder = new TextDecoder("utf-8");
  const rawString = decoder.decode(data);

  // 按 "data: " 分割字符串,处理多条数据
  const jsonStrings = rawString
    .split("data: ")
    .filter((str) => str.trim() !== "");
  console.log("jsonStrings", jsonStrings);
  jsonStrings.forEach((jsonString) => {
    try {
      // 判断是否结束
      if (jsonString.indexOf("[DONE]") !== -1) {
        console.log("数据流结束");
        return;
      }

      // 解析 JSON 字符串
      const messageData = JSON.parse(jsonString);

      const message = messageData.choices[0].delta.content || "";
      const lastMessage = messages.value[messages.value.length - 1];
      if (lastMessage.role === "assistant") {
        lastMessage.content += message;
      } else {
        messages.value.push({ role: "assistant", content: message });
      }
      nextTick(() => {
        scrollIntoView.value = `msg-${messages.value.length - 1}`;
      });
    } catch (error) {
      console.error("解析数据失败:", error);
    }
  });
};
相关推荐
泫凝6 分钟前
使用 WebP 优化 GPU 纹理占用
前端·javascript
訾博ZiBo6 分钟前
AI日报 - 2025年3月18日
人工智能
magic 24513 分钟前
CSS块元素、行内元素、行内块元素详解
前端·css
returnShitBoy25 分钟前
前端面试:React hooks 调用是可以写在 if 语句里面吗?
前端·javascript·react.js
love黄甜心26 分钟前
Sass:深度解析与实战应用
前端·css·sass
新说一二41 分钟前
AI技术学习笔记系列004:GPU常识
人工智能·笔记·学习
一个处女座的程序猿O(∩_∩)O1 小时前
人工智能中神经网络是如何进行预测的
人工智能·深度学习·神经网络
小白的高手之路1 小时前
如何安装旧版本的Pytorch
人工智能·pytorch·python·深度学习·机器学习·conda
虾球xz1 小时前
游戏引擎学习第161天
人工智能·学习·游戏引擎
goto_w1 小时前
使用elementplus的table表格遇到的问题
前端·javascript·vue.js