1.技术说明
uni-app、智谱清言、XMLHttpRequest、marked
2.实现原理
此处实现原理为前端直接请求返还数据结果，未经后端进行处理，如AI接口有变化，请根据接口文档进行修改，通义千问AI同理。
XMLHttpRequest发起请求->监听数据流->输出结果到页面（markdown）
3.插件安装
## 安装marked
pnpm add marked
## uni-app 支持XMLHttpRequest请求，因此无需安装4.核心代码
该代码只实现了核心功能，具体参数及业务拓展请自行修改
<template>
<view class="container p-3 box-border" @click="handleClick">message</view>
<view v-html="responseData"></view>
</template>
<script lang="ts" setup>
import { marked } from 'marked'
/**
* @author: xl
* @date: 2025/01/12
* @description: 智谱清言语言模型接入 wechat:suiyi01001
* @version: 1.0.0
*/
// 定义响应数据
const responseData = ref<String>('')
// 定义点击事件
const handleClick = () => {
initRequest()
}
// 定义请求
const initRequest = () => {
const xhr = new XMLHttpRequest()
// 打开 POST 请求
xhr.open('POST', 'https://open.bigmodel.cn/api/paas/v4/chat/completions', true)
// 设置自定义请求头
xhr.setRequestHeader('Authorization', 'Bearer 你自己的key')
xhr.setRequestHeader('Content-Type', 'application/json')
// 发送 POST 请求，带参数
xhr.send(
JSON.stringify({
model: 'glm-4-plus',
messages: [{ role: 'user', content: '中国国土面积是多少' }],
stream: true,
}),
)
// 监听流数据
xhr.onreadystatechange = async () => {
// 说明有数据返回
if (xhr.readyState === 3) {
// 分割数据
const jsonStringsArray = xhr.responseText
.split('\n')
.filter((line) => line.startsWith('data: '))
// 循环分割的数据
let dataText = ''
for (var i = 0; i < jsonStringsArray.length; i++) {
if (jsonStringsArray[i].slice(6) == '[DONE]') {
console.log('SSE 已关闭连接')
} else {
const jsonObject = JSON.parse(jsonStringsArray[i].slice(6)) // 剔除"data:"前缀
// console.log('jsonObject: ', jsonObject);
const choices = jsonObject.choices // 提取choices数组
// 存在数据输出结果
if (jsonObject.choices && jsonObject.choices[0].delta) {
dataText += jsonObject.choices[0].delta.content
}
}
}
// 输出最终数据
responseData.value = await marked(dataText)
}
}
// 监听错误
xhr.onerror = (err) => {
console.error('SSE 错误：', err)
}
}
onLoad(() => {})
</script>
<style lang="scss" scoped></style>
