GCH空城

API (应用程序编程接口) 入门全攻略

⏱️ 阅读时间 4 分钟
API后端开发接口教程

认识 API：现代软件的数字桥梁

如果你正准备从纯静态页面过渡到动态数据交互，或者想让你的应用接入各种强大的外部能力（如支付、AI 大模型、地图），API (Application Programming Interface) 是你必须跨越的门槛。你可以把它想象成餐厅里的“服务员”：你（客户端）只需要把菜单（请求）交给服务员（API），服务员去后厨（服务器）拿菜并端回给你（响应），你完全不需要自己进厨房炒菜。

1. 核心思想

API 的两大核心作用是：

  • 解耦与封装： 隐藏系统底层复杂的实现逻辑，只暴露出简单、标准化的调用入口。开发者不需要知道底层代码是怎么写的，只要知道怎么“传参”和“接收结果”即可。
  • 数据互通： 让使用不同编程语言（如前端 Vue 和后端 Java）、运行在不同物理位置的软件系统能够无缝沟通，实现功能的“积木式”组合。

方案一：调用第三方 Web API

如果你只是想在自己的网页或脚本中接入外部现成的数据（比如获取天气预报、对接 GitHub 数据），通过 HTTP 协议调用现成的 RESTful API 是最快的方法。

1. 使用 Fetch API 快速上手

现代浏览器自带了 fetch 方法，无需安装任何额外的库即可直接发起网络请求。

  • 使用方法： 在 JavaScript 中通过提供目标 API 的 URL 和请求参数，获取并解析 JSON 数据。
  • 示例：
// 获取外部公共 API 数据的简单示例
// 1. 发起 GET 请求去获取一个随机笑话
fetch('[https://official-joke-api.appspot.com/random_joke](https://official-joke-api.appspot.com/random_joke)')
  .then(response => {
    // 2. 检查响应状态是否成功 (状态码 200-299)
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    // 3. 将响应体解析为 JSON 格式
    return response.json();
  })
  .then(data => {
    // 4. 在控制台打印解析后的数据
    console.log(`提问: ${data.setup}`);
    console.log(`回答: ${data.punchline}`);
  })
  .catch(error => {
    console.error('获取 API 数据时发生错误:', error);
  });

方案二：自建后端提供 API

对于需要对外提供核心业务逻辑、存储用户数据或进行权限验证的生产级项目，自己搭建服务器并编写 API 接口是必经之路。

1. Node.js + Express 快速构建后端

使用 Node.js 配合轻量级的 Express 框架，你可以用前端熟悉的 JavaScript 语法迅速搭建起一个提供 API 的服务器。

  • 依赖工具： Node.js 环境、Express 框架
  • 操作步骤：
  1. 初始化项目并安装 Express：
    npm init -y
npm install express
  2. 创建 server.js 文件，编写接口逻辑：
    const express = require('express');
const app = express();
const port = 3000;

// 解析客户端发送的 JSON 格式请求体
app.use(express.json());

// 定义一个 GET 类型的 API 接口
app.get('/api/users', (req, res) => {
  res.json({ message: "成功获取用户列表", users: ["Alice", "Bob"] });
});

// 启动服务器并监听 3000 端口
app.listen(port, () => {
  console.log(`API 服务器已启动，访问地址: http://localhost:${port}`);
});
  3. 在终端运行你的 API 服务器：
    node server.js

核心架构：API 交互的通用规范

优秀的 API 设计不仅要能跑通，还需要遵循行业共识，这样才能降低团队协作和第三方对接的沟通成本。

1. RESTful 架构风格

目前最主流的 Web API 设计规范。它强调使用标准的 HTTP 动词来表达操作意图：用 GET 获取数据，用 POST 创建数据，用 PUT 修改数据，用 DELETE 删除数据。同时，URL 路径通常代表具体的“资源”（如 /api/articles/1）。

2. JSON 数据格式

  • 简介： JSON (JavaScript Object Notation) 是现代 Web API 传输数据的绝对主力（逐步取代了早期的 XML）。它本质上是纯文本，具有极致的轻量化特性，人类易读，同时也极易被各种编程语言解析和生成。无论是请求体的发送还是响应结果的返回，绝大多数 API 都以 JSON 作为默认标准。

⚠️ 注意： 在前后端分离开发并调用 API 时，有一个极其经典的“新手坑”：CORS（跨域资源共享）拦截。当你的前端网页（比如运行在 localhost:5173）去请求不同域名或端口的后端 API（比如 localhost:3000）时，浏览器出于安全策略会默认拦截这个请求。如果你在控制台看到红色的 CORS 报错，请务必在后端服务器的代码中配置跨域允许头（如 Express 中的 cors 中间件），而不是在前端盲目找问题。

← 返回首页