前端 HTTP 请求 & LLM 接口开发

✨一、前端 HTTP 原生请求两种方式

📌 fetch：现代浏览器原生 API，依托 Promise 实现异步，零引入依赖

javascript 复制代码

async function fetchPostData() {
try { 
const response = await fetch("https://api.example.com/submit", 
{ method: "POST",
// 请求方式：
POST headers: { 
"Content-Type": "application/json",
// 告诉服务器传 JSON 格式 },
body: JSON.stringify({ username: "test", password: "123456", }), });
const data = await response.json();
console.log("POST 成功：", data);
} catch (error) {
console.error("POST 失败：", error);
} 
}
fetchPostData();

💡 核心解析

1. method: 'POST'：提交数据给服务器

2. headers：请求头，声明数据格式

3. body：请求体，存放要提交的数据

4. JSON.stringify()：把 JS 对象转成 JSON 字符串

📌 XMLHttpRequest：传统 Ajax 底层原生接口，早期前端网络请求标准实现

javascript 复制代码

function xhrGetData() {
// 1. 创建 XHR 对象 
const xhr = new XMLHttpRequest(); 
// 2. 配置请求：GET 方式 + 地址 + 异步(true)
xhr.open("GET", "https://api.example.com/data", true); 
// 3. 监听请求状态变化 
xhr.onreadystatechange = function () { 
// 请求完成 & 成功 
if (xhr.readyState === 4 && xhr.status === 200)
{ 
// 解析 JSON 
const data = JSON.parse(xhr.responseText);
console.log("XHR 请求成功：", data);
}
}; 
// 4. 发送请求 
xhr.send(); 
} 
xhrGetData();

🔍 逐行解析

1. new XMLHttpRequest()：创建 Ajax 核心对象

2. open()：配置请求方式、URL、是否异步

3. onreadystatechange：监听请求状态

4. readyState === 4：请求完成

5. status === 200：HTTP 状态码成功

6. send()：真正发送请求

🚨 XMLHttpRequest 必须注意的关键点

xhr.readyState === 4 && xhr.status === 200

💡配套三大编程架构 & 执行模式

C/S 客户端 - 服务端架构
- 📱 Client 客户端：网页、安卓 /iOS App，前端属于客户端
- 🖥️ Server 服务端：硬件服务器 + 后端程序（Java/NodeJS 等）
- 🔖 B/S 浏览器服务架构：C/S 的分支，浏览器作为客户端载体
前后端分离架构✅ 前端负责页面展示交互，后端只提供 API 接口，通过 HTTP 完成数据互通
异步编程：async/await⏳ 基于 Promise 语法糖，控制代码执行顺序：等待接口请求完毕、拿到返回数据，再往下执行代码

javascript 复制代码

let friends = [];

async function loadData() {
  //console.log('loadData');
  // endpoint 
  const endpoint = 'http://localhost:3000/friends';
  // 发送请求  异步的
  //await fetch(endpoint)
  // 等待响应返回
  // 响应体 是 json二进制字符串转换为Json对象
  /*.then(res => res.json())
  .then(data => {
    friends = data;
    console.log(data);
  });*/
  // 异步变同步
  const res = await fetch(endpoint);
  const data = await res.json();
  return data;
}
function renderData(friends) {
  console.log('renderData');
  const oBody = document.querySelector('table tbody');
  if (friends.length > 0) {
    oBody.innerHTML = friends.map(function (friend) {
      console.log(friend);
      return `<tr>
      <td>${friend.id}</td>
      <td>${friend.name}</td>
      <td>${friend.age}</td>
      </tr>`;
    }).join('');
  }
}
async function init() { //异步
  console.log('init start');
  const friends = await loadData();
  console.log(friends);
  renderData(friends);
}
init();
//console.log('init end');

✨二、服务器与网络底层知识

🔍1. 服务访问地址规则：IP + 端口

示例：http://127.0.0.1:3000

• 🌐 http：前后端数据传输的通信协议

• 📍 IP 地址：网络里设备唯一标识，用来定位服务器

• 🔢 端口号：一台服务器区分多个后台服务

• 🔤 域名（www.baidu.com）：方便人类记忆；DNS 解析自动把域名转为 IP

🔍2. API 端点 endpoint

• 📝 接口请求的目标 URL，项目统一集中配置，便于后期维护、改地址

✨三、接口数据前后端流转

📄 后端返回标准 JSON/JSON 数组数据
🧩 前端用map循环遍历数组，拼接DOM 字符串，动态渲染列表页面

✨四、LLM 大模型接口两种调用方案

🧰 方案一：OpenAI 官方 SDK 调用（最简单）

复制代码

步骤
1. 安装 SDK 依赖包
2. 导入 SDK 并配置 API Key 
3. 调用内置对话方法
4. 直接获取返回结果✅ 不用写请求头、不用处理 JSON，全自动封装

⚙️ 方案二：原生 HTTP 请求（fetch/XHR）（最灵活）

复制代码

步骤
填写接口地址（endpoint）
配置请求方法：POST
设置请求头：API Key + JSON 格式
拼接请求体参数（模型、消息、温度等）
发送请求
解析返回 JSON 数据
✅ 可对接任何私有化大模型

✨五、项目常用第三方库：Axios

复制代码

• 📦 基于 XHR+Promise 封装，浏览器、Node.js 双环境通用 
• ⭐ 亮点：自带请求 / 响应拦截、自动解析 JSON、统一异常处理，企业项目首选

📚自学指引

复制代码

前往 MDN 官方文档，逐一查阅 fetch、XHR、async/await 的官方详细文档
详细了解每个API的用法