Day 10 - HTTP 协议详解

Day 10 - HTTP 协议详解今天学完你能做什么理解浏览器和服务器怎么对话看懂 HTTP 请求和响应的结构知道 GET/POST/PUT/DELETE 什么时候用理解状态码的含义200/404/500 等一、HTTP 是什么——网上的快递协议当你打开一个网页发生了什么你浏览器 服务器 │ │ │ ──── 我要看首页 ──────→ │ HTTP 请求 │ │ │ ←──── 给你首页 ──────── │ HTTP 响应 │ │HTTP 就是浏览器和服务器之间通信的语言。就像快递有标准的面单格式收件人、地址HTTP 也有标准的格式。二、HTTP 请求的结构——快递面单一个 HTTP 请求包含三部分┌─────────────────────────────┐ │ 请求行Request Line │ → 要干什么去哪 ├─────────────────────────────┤ │ 请求头Headers │ → 附加信息谁发的什么格式 ├─────────────────────────────┤ │ 请求体Body │ → 要传的数据可选 └─────────────────────────────┘2.1 实际例子POST /api/users HTTP/1.1 Host: api.example.com Content-Type: application/json Authorization: Bearer abc123 { name: 张三, email: zhangsantest.com }解读POST→ 要创建一个新用户/api/users→ 接口路径Content-Type: application/json→ 发送的是 JSON 数据下面的 JSON → 具体的用户数据三、HTTP 方法——“动词”方法含义类比什么时候用GET获取数据看书访问网页、查列表、搜东西POST创建数据写新的一页注册、登录、提交表单PUT完整更新撕掉重写编辑用户全部信息PATCH部分更新涂改几个字只改用户名DELETE删除数据撕掉一页删除用户、删除文章// GET —— 获取数据参数通常在 URL 里fetch(https://api.example.com/users?page1size20);// POST —— 创建数据数据放在 Body 里fetch(https://api.example.com/users,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({name:张三,email:zstest.com})});// PUT —— 完整替换fetch(https://api.example.com/users/1,{method:PUT,headers:{Content-Type:application/json},body:JSON.stringify({name:张三改,email:newtest.com})});// DELETE —— 删除fetch(https://api.example.com/users/1,{method:DELETE});四、HTTP 状态码——服务器的回复4.1 五大类范围含义记忆法1xx信息知道了继续2xx成功搞定了3xx重定向去别的地方找4xx客户端错误你的问题5xx服务器错误我的问题4.2 常见状态码速查状态码含义什么时候遇到200OK一切正常 ✅201Created创建成功 ✅301永久重定向网址换了302临时重定向暂时跳转304未修改用缓存就行400Bad Request请求参数错了401Unauthorized没登录403Forbidden没权限404Not Found找不到页面/数据500Internal Server Error服务器崩了502Bad Gateway网关错误503Service Unavailable服务器维护中最常写代码遇到的200、400、401、404、500。五、请求头和响应头——附加信息常用请求头头部含义例子Content-Type发送的数据格式application/jsonAuthorization身份令牌Bearer eyJhbG...Cookie携带 CookiesessionIdabc123User-Agent浏览器信息Mozilla/5.0...Accept希望接收的格式application/json常用响应头头部含义例子Content-Type返回的数据格式application/jsonSet-Cookie设置 Cookiesessionxyz; HttpOnlyCache-Control缓存策略max-age3600Access-Control-Allow-Origin跨域允许*或具体域名六、RESTful API —— 接口设计的规范RESTful 是一种 API 设计风格核心思想用 URL 表示资源用 HTTP 方法表示操作。GET /users → 获取用户列表 GET /users/1 → 获取 ID 为 1 的用户 POST /users → 创建新用户 PUT /users/1 → 完整更新用户 1 PATCH /users/1 → 部分更新用户 1 DELETE /users/1 → 删除用户 1 GET /users/1/orders → 获取用户 1 的所有订单七、在代码中发 HTTP 请求7.1 浏览器fetchasyncfunctiongetUsers(){try{constresponseawaitfetch(https://api.example.com/users);if(!response.ok){thrownewError(HTTP${response.status});}constdataawaitresponse.json();console.log(data);}catch(err){console.error(请求失败:,err);}}7.2 Node.js各种 HTTP 库// 使用 axios最流行importaxiosfromaxios;const{data}awaitaxios.get(https://api.example.com/users);constresultawaitaxios.post(https://api.example.com/users,{name:张三});八、HTTPS —— HTTP 的安全版HTTP → 明文传输别人能偷看 HTTPS → 加密传输别人看不到 就像 HTTP → 明信片谁都能看 HTTPS → 密封信封只有收件人能看今日小结┌──────────────────────────────────────────┐ │ │ │ HTTP 浏览器和服务器通信的语言 │ │ │ │ 方法GET查 POST增 PUT改 DELETE删 │ │ │ │ 状态码2xx成功 4xx你的错 5xx我的错 │ │ 200 OK / 404 找不到 / 500 服务器炸了 │ │ │ │ RESTfulURL 表资源方法表操作 │ │ │ │ fetch() 或 axios 发请求 │ │ │ │ 口诀GET 拿 POST 发状态码看是哪个岔 │ │ │ └──────────────────────────────────────────┘