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

置顶 mf_717714

已于 2025-02-27 09:10:29 修改

阅读量1.6k

点赞数 31

分类专栏：通义千问文章标签： vue.js 前端 javascript 阿里云

于 2025-02-26 14:28:53 首次发布

本文链接：https://blog.csdn.net/mf_717714/article/details/145874139

版权

通义千问专栏收录该内容

1 篇文章

订阅专栏

如果没有申请通义千问的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();