当前位置：首页 > news >正文

快速使用通义千问大模型API + VUE

news 2025/2/27 12:32:27

如果没有申请通义千问的API key自己在官网申请 --> 首次调用通义千问API

先看一下流式输出效果，再看博文：

注：本文主要讲解智能体应用下，如何使用单轮对话，多轮对话，流式输出三种API，如图所示：

在这里插入图片描述

点击应用卡片上的“调用”按钮，可查看API调用方式，如图所示：

在这里插入图片描述

一，选择插件进行获取数据和展示数据

1，获取数据的插件

Axios 是一个基于 promise 的网络请求库，用于单轮对话，多轮对话API，也可以使用fetch

npm install axios

EventSourcePolyfill， EventSource 是浏览器原生支持的 API，用于处理 Server-Sent Events (SSE) 流式数据。默认情况下，EventSource 无法直接配置请求头（headers）或发送 POST 请求。这是因为 EventSource 只支持 GET 请求，并且无法直接设置自定义请求头。如果你需要设置自定义请求头或发送 POST 请求，可以使用 EventSourcePolyfill 库。EventSourcePolyfill 是一个封装了 EventSource 的库，允许你配置请求头和其他选项。用于流式输出API，也可以使用fetch

npm install event-source-polyfill

备注：官方文档都是服务端调取API的方式，为了保证防止API key,app_id等数据泄露，当然前端也可以使用HTTP方式直接使用，但需要注意Axios在Node服务端支持stream类型请求，但是在浏览器客户端时不支持的，按照官方文档示例写会报错。

2，展示数据的插件

markdown-it 是一个高效且可扩展的 Markdown 解析器，完全支持 CommonMark 规范，并提供了许多语法扩展和插件

npm install markdown-it

highlight.js是一款基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可供选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容，比较实用

npm install highlight.js

二，调用相应API的主要方法

1，单轮对话，和官方文档类似

import axios from 'axios';async function callDashScope() {const apiKey = process.env.DASHSCOPE_API_KEY;const appId = 'YOUR_APP_ID';// 替换为实际的应用 IDconst url = `https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`;const data = {input: {prompt: "你是谁？"},parameters: {},debug: {}};try {const response = await axios.post(url, data, {headers: {'Authorization': `Bearer ${apiKey}`,'Content-Type': 'application/json'}});if (response.status === 200) {// 此处返回数据console.log(`${response.data.output.text}`);} } catch (error) {console.error(`Error calling DashScope: ${error.message}`);}
}callDashScope();

2，多论对话，和官方文档类似

多轮对话通过传递session_id或messages实现。更多用法请参考多轮对话。

使用session_id进行多轮对话

import axios from 'axios';// 记录上一次的对话session_id
const lastSessionId = ref('');async function callDashScope() {const apiKey = process.env.DASHSCOPE_API_KEY;const appId = 'YOUR_APP_ID';// 替换为实际的应用 IDconst url = `https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`;const data = {input: {prompt: "你是谁？"，session_id: lastSessionId.value},parameters: {},debug: {}};try {const response = await axios.post(url, data, {headers: {'Authorization': `Bearer ${apiKey}`,'Content-Type': 'application/json'}});if (response.status === 200) {// 此处返回数据lastSessionId.value = response.data.output.session_idconsole.log(`${response.data.output.text}`);console.log(`session_id=${response.data.output.session_id}`);} } catch (error) {console.error(`Error calling DashScope: ${error.message}`);}
}
callDashScope();

使用messages进行多轮对话

import axios from 'axios';// 记录消息列表
const messages = ref([{"role": "system","content": "You are a helpful assistant."},{"role": "user","content": "你是谁？"},{"role": "assistant","content": "我是阿里云开发的大规模语言模型，我叫通义千问。"},{"role": "user","content": "你能做什么？"}
])async function callDashScope() {const apiKey = process.env.DASHSCOPE_API_KEY;const appId = 'YOUR_APP_ID';//替换为实际的应用 IDconst url = `https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`;const data = {"input": {"messages": messages.value},parameters: {},debug: {}};try {const response = await axios.post(url, data, {headers: {'Authorization': `Bearer ${apiKey}`,'Content-Type': 'application/json'}});if (response.status === 200) {// 记录消息messages.value.push({"role": "assistant","content": response.data.output.text});console.log(`${response.data.output.text}`);} } catch (error) {console.error(`Error calling DashScope: ${error.message}`);}
}callDashScope();

3，流式输出，和官方文档不一样

方式1：EventSourcePolyfill获取stream数据（推荐）

EventSourcePolyfill比fetch方便，数据不需要太多处理

import { fetchEventSource } from '@microsoft/fetch-event-source';
function callDashScope() {const apiKey = process.env.DASHSCOPE_API_KEY;const appId = 'YOUR_APP_ID';// 替换为实际的应用 IDconst url = `https://dashscope.aliyuncs.com/api/v1/apps/${ appId }/completion`;const data = {input: {prompt: "你是谁？"stream: true,},parameters: {incremental_output: true},debug: {}};try {fetchEventSource(url, {method: 'post',headers: {'Authorization': `Bearer ${ apiKey }`,'Content-Type': 'application/json','X-DashScope-SSE': 'enable' // 流式输出},body: JSON.stringify(data),onmessage: (event) => {const data = JSON.parse(event.data);const text = data.output.text// 将输出追加到页面上document.getElementById('output').innerHTML += text},onclose: () => {console.log('Connection closed');},onerror: (error) => {console.error('Error with fetchEventSource:', error);}})} catch (error) {console.error(`Error calling DashScope: ${ error.message }`);}
}callDashScope();

方式2：fetch获取stream数据

注意：使用fetch获取stream数据，需要自己进行复杂的拼接解析，因此遇到比较复杂的数据时，JSON.parse(data)会报错。

async function callDashScope() {const apiKey = process.env.DASHSCOPE_API_KEY;const appId = 'YOUR_APP_ID';// 替换为实际的应用 IDconst url = `https://dashscope.aliyuncs.com/api/v1/apps/${ appId }/completion`;const data = {input: {prompt: "你是谁？"stream: true,},parameters: {incremental_output: true},debug: {}};try {const response = await fetch(url, {method: 'post',headers: {'Authorization': `Bearer ${ apiKey }`,'Content-Type': 'application/json','X-DashScope-SSE': 'enable' // 流式输出},body: JSON.stringify(data)})// 处理流式响应const reader = response.body.getReader();const decoder = new TextDecoder('utf-8');let done = false;while (!done) {const { value, done: chunkDone } = await reader.read();done = chunkDone;if (value) {const chunk = decoder.decode(value, { stream: true });// 逐行解析数据const lines = chunk.split(/\r?\n/).filter(line => line.trim() !== '');// 遍历每一行数据for (const line of lines) {if (line.trim().startsWith('data:')) {const data = line.trim().slice(5);if (data === '[DONE]') return;// 解析数据const parsedData = JSON.parse(data);if (parsedData.output) {// 处理输出数据const text = parsedData.output.text || '';// 将输出数据添加到页面中document.getElementById('output').innerHTML += text;}}}}}} catch (error) {console.error(`Error calling DashScope: ${ error.message }`);}
}callDashScope();