API的基础讲解
接口（API）、请求体/响应体、请求类型、状态码、RESTful API 实战指南
1. 接口（API）：前后端的通信通道
核心比喻
- 前端 = 顾客
- 后端 = 厨房
- 接口 = 点餐窗口 + 菜单规则
真实接口示例
- 登录：
POST /api/login - 获取用户信息：
GET /api/user/1001 - 删除商品：
DELETE /api/goods/2024
2. 请求体（Request Body）：前端传给后端的数据
适用场景：POST（新增）、PUT（更新）、PATCH（部分更新）
真实示例
// 注册新用户 { "username": "wangwu", "password": "abc123", "phone": "13800138000" } // 修改商品库存（PATCH） { "stock": 50 }3. 响应体（Response Body）：后端返回的数据
行业通用格式：
{ "code": 200, // 状态码 "msg": "success", // 提示信息 "data": {} // 核心数据 }真实响应示例
// 获取订单列表 { "code": 200, "data": [ { "id": 3001, "amount": 99.9 }, { "id": 3002, "amount": 200 } ] } // 登录失败 { "code": 400, "msg": "密码错误" }4. 请求类型（HTTP Methods）
| 方法 | 作用 | 实战示例 |
|---|---|---|
GET | 查询数据 | GET /api/orders?page=1 |
POST | 新增资源 | POST /api/products |
PUT | 全量更新 | PUT /api/user/1001 |
PATCH | 部分更新 | PATCH /api/user/1001/avatar |
DELETE | 删除资源 | DELETE /api/cart/2024 |
5. 状态码（HTTP Status Code）
高频状态码速查表
| 状态码 | 含义 | 触发场景 |
|---|---|---|
200 | 成功 | 查询订单成功 |
201 | 创建成功 | 新建用户成功 |
400 | 客户端错误 | 提交了无效的手机号 |
401 | 未授权 | 未登录访问个人资料 |
404 | 资源不存在 | 访问不存在的商品ID |
500 | 服务器内部错误 | 数据库连接失败 |
6. RESTful API 设计规范
核心原则：
- URL 用名词表示资源（如
/users，不用/getUsers） - HTTP 方法表示操作（GET/POST = 查/增）
- 状态码传达结果
传统接口 vs RESTful 对比
| 操作 | 传统风格 | RESTful 风格 |
|---|---|---|
| 获取用户 | GET /api/getUser?id=1 | GET /api/users/1 |
| 修改商品 | POST /api/updateGoods | PUT /api/goods/2024 |
| 删除评论 | GET /api/delComment | DELETE /api/comments/5 |
7. 完整实战案例：用户系统
场景：前端用 Axios 调用 RESTful 接口
// 1. 获取用户列表 axios.get('/api/users', { params: { page: 1 } }) // 2. 创建新用户 axios.post('/api/users', { name: "李四", job: "工程师" }) // 3. 更新用户（PUT全量更新） axios.put('/api/users/1001', { name: "李四新名字", job: "高级工程师" }) // 4. 删除用户 axios.delete('/api/users/1001')响应处理示例
axios.get('/api/users/1001') .then(response => { console.log(response.data); // { code:200, data:{ id:1001, name:"李四" } } }) .catch(error => { if (error.response.status === 404) { alert("用户不存在！"); } });附录：Axios 请求模板（复制可用）
// 通用配置 const service = axios.create({ baseURL: '/api', timeout: 5000 }); // 请求拦截器（例如添加token） service.interceptors.request.use(config => { config.headers.Authorization = 'Bearer xxx'; return config; }); // 响应拦截器（统一处理错误） service.interceptors.response.use( response => response.data, // 直接返回data字段 error => { if (error.response.status === 401) { router.push('/login'); // 跳转到登录页 } return Promise.reject(error); } );