API 接口API

网络基础

让一个程序向另一个程序请求数据或功能

先知道

HTTP 请求 HTTP

比如页面要显示天气，会向一个固定地址发出请求，API 再把天气数据返回来。这个约定会说明请求发到哪里、要带哪些信息，以及成功或失败时会返回什么。

请求 REQUEST
GET https://api.vibeui.dev/weather?city=shenzhen
Authorization: Bearer sk-••••3f2k

↓

响应 RESPONSE
200 OK
{ "city": "深圳", "temp": 31, "text": "多云" }

什么时候用

调用前先确认文档里的地址、方法和参数
GET/api/weather
把 API 密钥保存在服务端环境变量中
API Keysk-••••3f2k
只存在服务端环境变量里
根据状态码分别处理成功、未找到和服务端错误
200成功
404资源不存在
500服务端错误
先确认 JSON 结构，再读取需要的字段
{ "city": "深圳", "temp": 31 }返回是 JSON，先看清结构再取

什么时候不用

把 API 密钥写进浏览器可以看到的代码
const key = "sk-live-8f2k…"前端代码可见，密钥会泄露
忽略失败状态，仍把返回内容当成成功数据处理
404仍按成功数据处理
直接把开发错误原文展示给普通用户
AxiosError: ECONNREFUSED缺少用户能够理解和执行的说明
在循环和频繁输入中连续发出大量重复请求
429频繁重复请求，触发限流

组成结构 · Anatomy

GET https://api.vibeui.dev/weather?city=shenzhenAuthorization: Bearer sk-••••3f2k↓200 OK { "city": "深圳", "temp": 31 }

1请求方法MethodGET 拿数据、POST 交数据，见 HTTP 请求 HTTP

2接口地址Endpoint菜单上的菜名：哪个地址、带什么参数

3API KeyAPI Key你的会员凭证，按调用计费，千万别泄露

4响应Response状态码 + JSON 数据 JSON 数据，先看码再取数

常见变体 · Variants

RESTREST API

GET /api/users/42

地址即资源，绝大多数接口是它

GraphQLGraphQL

POST /graphql { user { name } }

一个地址，前端按需取字段

WebSocketWebSocket

wss://api.vibeui.dev/live

长连接，服务端主动推消息

典型使用场景

API 文档页

天气 API

查询天气

城市列表

用量统计

GET /api/weather

查询指定城市的实时天气

参数

city必填城市拼音，如 shenzhen

days可选预报天数，默认 1

终端 curl 调接口

$ curl https://api.vibeui.dev/weather?city=shenzhen \
  -H "Authorization: Bearer sk-••••3f2k"
{
  "city": "深圳",
  "temp": 31,
  "text": "多云"
}

开发者工具看请求

Elements Console Network

weather?city=shenzhen GET 200 86 ms

PreviewHeadersResponse

        ▾ city: "深圳"

          temp: 31

          text: "多云"

API Key 管理

API Keys

生产环境 sk-live-••••3f2k 3 天前用过

本地调试 sk-test-••••9a01 刚刚用过

⚠ Key 只会在创建时完整显示一次，请立刻妥善保存