HTTP 请求HTTP

网络基础

规定浏览器怎样发出请求，服务器怎样返回结果

先知道

网址 URL

一次 HTTP 请求会带上方法、网址、请求头和可选的数据内容。GET 常用于读取，POST 常用于提交；服务器处理后返回状态和结果，可以在浏览器的 Network 面板中查看全过程。

GET —— 拿数据
GET /api/components HTTP/1.1
Host: api.vibeui.dev

POST —— 交数据
POST /api/login HTTP/1.1
Content-Type: application/json{ "email": "you@example.com", "pwd": "••••••" }

什么时候用

地址栏回车、点链接 Link 都是 GET：只是把内容拿回来
🔒vibeui.dev/components
GET地址栏回车就是 GET
表单 Form 提交、登录注册都是 POST：数据放在请求体里
you@example.com••••••••
登录POST
调 API 接口 API 出问题，先开 Network 面板看请求长什么样
NetworkFetch/XHR
GET/api/list200
POST/api/save200
改数据用 PUT / PATCH，删除用 DELETE，别全用 POST
GETPOSTPUTDELETE

什么时候不用

用 GET 传密码：明文留在浏览器历史和服务器日志里
/login?pwd=123456密码进了浏览器历史和服务器日志
给 GET 塞请求体：多数服务器直接忽略，参数白放
GET/api/list
GET 的请求体，多数服务器直接忽略
下单按钮不防重复点击：连点三下就是三个 POST 三笔单
POST/api/order ×3
连点三下按钮，下了三单
接口报错时先检查实际请求，不要直接猜测前端问题
不看请求长啥样，瞎猜接口格式

组成结构 · Anatomy

POST /api/login HTTP/1.1
Host: api.vibeui.dev
Content-Type: application/json{ "email": "you@example.com", "pwd": "••••••" }

1请求方法Method这封信想干嘛：GET 拿、POST 交、PUT 改、DELETE 删

2请求地址URL寄给谁，见网址 URL；路径加参数

3请求头Headers信封上的附加说明：内容类型、身份凭证、来源

4请求体Body信封里的包裹，POST 的数据都装在这，多为 JSON 数据 JSON

常见变体 · Variants

GETGET

GET /api/list?page=1

拿数据，参数放在网址里

POSTPOST

POST /api/login

交数据，内容放在请求体里

PUT / PATCHPUT & PATCH

PUT /api/items/42

更新已有数据，覆盖或局部改

DELETEDELETE

DELETE /api/items/7

删除数据时用，请慎重

典型使用场景

地址栏回车发 GET

🔒 vibeui.dev/components ⏎

Network · 1 个请求

components GET 200 document

登录表单发 POST

点击瞬间 → POST /api/login

Network 面板看请求

Network Fetch/XHR

list?page=1GET20064 ms

savePOST200120 ms

items/42PUT20098 ms

items/7DELETE20475 ms

curl 手动发请求

$ curl -X POST https://api.vibeui.dev/login \
  -H "Content-Type: application/json" \
  -d '{"email":"you@example.com","pwd":"123456"}'
{ "token": "eyJhbGciOi…" }
# 方法 -X、头 -H、体 -d，一封信的三要素