如果没有申请通义千问的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';// 替换为实际的应用 ID
const 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';// 替换为实际的应用 ID
const 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_id
console.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';//替换为实际的应用 ID
const 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';// 替换为实际的应用 ID
const 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';// 替换为实际的应用 ID
const 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();