API的基础讲解

接口API、请求体/响应体、请求类型、状态码、RESTful API 实战指南1. 接口API前后端的通信通道核心比喻前端 顾客后端 厨房接口 点餐窗口 菜单规则真实接口示例登录POST /api/login获取用户信息GET /api/user/1001删除商品DELETE /api/goods/20242. 请求体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?page1POST新增资源POST /api/productsPUT全量更新PUT /api/user/1001PATCH部分更新PATCH /api/user/1001/avatarDELETE删除资源DELETE /api/cart/20245. 状态码HTTP Status Code高频状态码速查表状态码含义触发场景200成功查询订单成功201创建成功新建用户成功400客户端错误提交了无效的手机号401未授权未登录访问个人资料404资源不存在访问不存在的商品ID500服务器内部错误数据库连接失败6. RESTful API 设计规范核心原则URL 用名词表示资源如/users不用/getUsersHTTP 方法表示操作GET/POST 查/增状态码传达结果传统接口 vs RESTful 对比操作传统风格RESTful 风格获取用户GET /api/getUser?id1GET /api/users/1修改商品POST /api/updateGoodsPUT /api/goods/2024删除评论GET /api/delCommentDELETE /api/comments/57. 完整实战案例用户系统场景前端用 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); } );