快捷導(dǎo)航

VUE對(duì)接deepseekAPI調(diào)用方式

更新時(shí)間：2025年01月24日 09:04:49 作者：小嘟嚷ovo

文章介紹了如何在Vue項(xiàng)目中對(duì)接DeepSeek API,包括在開放平臺(tái)注冊(cè)賬號(hào)申請(qǐng)APIKey、安裝axios庫、創(chuàng)建API調(diào)用函數(shù)以及在Vue組件中調(diào)用該函數(shù)

VUE對(duì)接deepseekAPI調(diào)用

1.先去開放平臺(tái)注冊(cè)賬號(hào)申請(qǐng)api key

開放平臺(tái)：https://platform.deepseek.com/api_keys

2.你的項(xiàng)目需要有發(fā)送請(qǐng)求的axios或者自己寫

npm install axios
# 或
yarn add axios

3.創(chuàng)建 API 調(diào)用函數(shù)

在 Vue 項(xiàng)目中，通常會(huì)將 API 調(diào)用的邏輯封裝到一個(gè)單獨(dú)的文件中，例如 src/api/deepseek.js。

關(guān)于其中 /your-endpoint-path 是需要你自己去api文檔中查看的，文檔具體地方在最后面。

import axios from 'axios';
 
const DEEPSEEK_API_URL = 'https://api.deepseek.com'; // 實(shí)際的 DeepSeek API 地址
const DEEPSEEK_API_KEY = 'your-api-key'; // 替換為你的 DeepSeek API Key
 
// 創(chuàng)建 axios 實(shí)例
const deepseekClient = axios.create({
  baseURL: DEEPSEEK_API_URL,
  headers: {
    'Authorization': `Bearer ${DEEPSEEK_API_KEY}`,
    'Content-Type': 'application/json',
  },
});
 
/**
 * 調(diào)用 DeepSeek API 示例
 * @param {Object} data 請(qǐng)求參數(shù)
 * @returns {Promise} API 響應(yīng)
 */
export const callDeepSeekAPI = async (data) => {
  try {
    const response = await deepseekClient.post('/your-endpoint-path', data); // 替換為實(shí)際的 API 路徑
    return response.data;
  } catch (error) {
    console.error('DeepSeek API 調(diào)用失敗:', error);
    throw error;
  }
};

在你的 Vue 組件中，可以調(diào)用上面封裝的 callDeepSeekAPI 函數(shù)。

<template>
  <div>
    <h1>DeepSeek API 調(diào)用示例</h1>
    <button @click="fetchData">調(diào)用 DeepSeek API</button>
    <div v-if="loading">加載中...</div>
    <div v-else>
      <pre>{
  
  { responseData }}</pre>
    </div>
  </div>
</template>
 
<script>
import { callDeepSeekAPI } from '@/api/deepseek'; // 導(dǎo)入封裝的 API 函數(shù)
 
export default {
  data() {
    return {
      loading: false,
      responseData: null,
    };
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        const data = {
          // 替換為實(shí)際的請(qǐng)求參數(shù)
          prompt: '你好，DeepSeek！',
          max_tokens: 50,
        };
        this.responseData = await callDeepSeekAPI(data);
      } catch (error) {
        console.error('API 調(diào)用失敗:', error);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>
 
<style scoped>
pre {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
}
</style>

文檔：對(duì)話補(bǔ)全 | DeepSeek API Docs