使用Fetch API连接DeepSeek大模型的技术指南

绅士玖
3 阅读3分钟

前言

在现代Web开发中，JavaScript的Fetch API是与后端服务交互的重要工具。本文将详细介绍如何使用Fetch API连接DeepSeek大模型，并解释每个技术细节。

1. Fetch API基础

Fetch API是现代浏览器提供的用于发起网络请求的JavaScript接口。它比传统的XMLHttpRequest更强大、更灵活，基于Promise实现，使得异步操作更加优雅。

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. 连接DeepSeek大模型的完整代码

首先我们可以通过这个网站：DeepSeek 开放平台，获取API端点，和API密钥，当然获取apiKey需要支付一定的费用，可以查看接口文档查看详细信息

image.png

下面是连接DeepSeek大模型的完整JavaScript代码，我们将逐部分详细解释：

const apiKey = '你的OpenAI_API密钥'; // 替换为你的实际API密钥
const apiUrl = "https://api.deepseek.com/chat/completions";
const headers = {
  "Content-Type": "application/json",
  "Authorization": `Bearer ${apiKey}`
};

const payload = {
  model: 'deepseek-chat',
  messages: [
    {
      role: 'system',
      content: 'You are a helpful assistant.'
    },
    {
      role:'user',
      content: 'Hello! Deepseek'
    }
  ],
  temperature: 0.7
};

fetch(apiUrl, {
  method: 'POST',
  headers: headers,
  body: JSON.stringify(payload)
}).then(res => res.json())
  .then(data => {
    console.log(data);
    document.querySelector('#reply').innerHTML += data.choices[0].message.content
  });

3. 详细技术解析

3.1 API端点(Endpoint)

const apiUrl = "https://api.deepseek.com/chat/completions";
  • API端点：这是DeepSeek大模型服务的URL地址，通常由服务提供商提供。
  • HTTPS协议：使用加密的HTTP协议，确保数据传输安全。
  • 路径/chat/completions：表示这是用于聊天完成的API端点，不同的端点可能提供不同功能。

3.2 请求头(Headers)

const headers = {
  "Content-Type": "application/json",
  "Authorization": `Bearer ${apiKey}`
};
  • Content-Type：指定请求体的格式为JSON，这是大多数API的标准要求。
  • Authorization：包含访问令牌(Bearer Token)，用于身份验证。注意：在实际应用中，密钥不应硬编码在前端代码中，而应通过后端服务中转，以防泄露。

3.3 请求体(Payload)

const payload = {
  model: 'deepseek-chat',
  messages: [
    {
      role: 'system',
      content: 'You are a helpful assistant.'
    },
    {
      role:'user',
      content: 'Hello! Deepseek'
    }
  ],
  temperature: 0.7
};

  • model：指定要使用的模型名称，这里是'deepseek-chat'。

  • messages：对话消息数组，包含三种角色：

    1. system：系统角色，通常用于设置AI的行为和初始指令，只会出现一次。
    2. user：用户角色，表示用户输入的内容。
    3. assistant：助手角色，表示AI之前的回复（在多轮对话中需要）。

  • temperature：控制模型生成文本的随机性和创造性，通常是0.0到2.0之间

    1. 低值(如0.1-0.3) ：输出更确定、保守，适合需要准确答案的场景
    2. 中值(如0.7-1.0) ：平衡创造性和连贯性，适合大多数对话场景
    3. 高值(如1.0以上) ：输出更随机、有创造性，适合需要多样性的场景

3.4 发起Fetch请求

fetch(apiUrl, {
  method: 'POST',
  headers: headers,
  body: JSON.stringify(payload)
})
  • method：指定HTTP方法为POST，因为我们要发送数据。
  • headers：包含我们之前定义的请求头。
  • body：请求体，必须是字符串格式，所以使用JSON.stringify()将对象转换为JSON字符串。

3.5 处理响应

.then(res => res.json())
  .then(data => {
    console.log(data);
    document.querySelector('#reply').innerHTML += data.choices[0].message.content
  });

  1. res.json() ：将响应流解析为JSON对象。

  2. data处理：响应数据通常包含AI的回复，这里我们：

    • 将完整响应打印到控制台
    • 提取AI回复内容(data.choices[0].message.content)并显示在页面上

4. 安全注意事项

  1. API密钥保护：在前端代码中硬编码API密钥是非常危险的，容易被他人窃取。最佳实践是通过后端服务中转请求。
  2. HTTPS：确保始终使用HTTPS协议，保护数据传输安全。
  3. 错误处理：实际应用中应添加.catch()处理网络错误和API错误。

5. 扩展应用

5.1 实现多轮对话

要实现多轮对话，需要在messages数组中保留历史对话：

const payload = {
  model: 'deepseek-chat',
  messages: [
    {role: 'system', content: 'You are a helpful assistant.'},
    {role: 'user', content: '什么是深度学习？'},
    {role: 'assistant', content: '深度学习是机器学习的一个分支...'},
    {role: 'user', content: '它和传统机器学习有什么区别？'}
  ]
};

5.2 添加错误处理

fetch(apiUrl, {
  method: 'POST',
  headers: headers,
  body: JSON.stringify(payload)
})
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
})
.then(data => {
  console.log(data);
  document.querySelector('#reply').innerHTML += data.choices[0].message.content;
})
.catch(error => {
  console.error('Error:', error);
  document.querySelector('#reply').innerHTML = 'Error: ' + error.message;
});

6. 总结

通过Fetch API连接DeepSeek大模型涉及以下几个关键步骤：

  1. 设置正确的API端点
  2. 配置必要的请求头（特别是认证信息）
  3. 构建符合API要求的请求体
  4. 使用POST方法发起请求
  5. 正确处理响应数据

理解这些基本概念后，你可以轻松地将类似的方法应用于其他AI服务的API集成。随着Web技术的发展，Fetch API已成为前端与后端服务交互的标准方式之一，掌握它对现代Web开发至关重要。

avatar
文章
阅读
粉丝