跳转到内容

公开 API 小工具练习:先设计,再请求

公开 API 小工具适合练“请求、展示、失败提示”。关键不是找最酷的 API,而是找一个新手能安全请求的 API。

  • public-apis/public-apis:公开 API 清单。练习前要重新确认 API 是否免费、是否需要认证、是否仍可用。

选一个不需要认证、支持 HTTPS、浏览器能请求的 API,设计一个最小查询页面。先不接真实付费服务,不做登录,不写后端。

  • API 候选链接。
  • API 在 public-apis 里的 Auth、HTTPS、CORS 标记。
  • 你想做的一个查询动作,例如按关键词搜索、按 ID 查询、随机返回一条结果。
  • 页面需要展示的 3 个以内字段。
  • 请求失败时给用户看的提示文案。

如果 API 要求 API Key、OAuth、付费账号、复杂注册,先换一个更简单的候选。

请从 public-apis 里帮我挑一个适合新手的小 API。
要求:
1. 优先免费
2. 优先不需要认证
3. 必须支持 HTTPS
4. 优先支持浏览器 CORS
5. 请求方式简单
6. 返回结果能做成一个小页面
7. 请求失败时能给用户明确提示
请输出:
1. API 名称和链接
2. public-apis 里标注的 Auth、HTTPS、CORS
3. 是否需要 API Key、OAuth、账号或付费计划
4. 最小页面应该包含哪些输入和输出
5. 应该请求哪个接口
6. 失败时页面应该怎么提示
7. 实现前还需要我打开哪个官方 API 文档确认
先给方案,不要直接写代码,不要替我注册账号。

确认 API 候选后,再让 AI 写最小页面。

请基于刚才确认的 API,设计一个最小查询页面。先给文件计划,不要直接改代码。
页面目标:{例如按关键词搜索公开艺术品资料}
API 链接:{官方 API 文档链接}
认证情况:不需要认证 / 需要 API Key / 不确定
我的项目类型:纯 HTML / Astro / React / 其他
请输出:
1. 页面包含哪些输入
2. 页面展示哪些输出字段,最多 3 个
3. 加载中、成功、失败、无结果四种状态怎么显示
4. 需要修改哪些文件
5. 是否会把 API Key 暴露到前端
6. 如何手动验证
约束:
- 不要接付费服务
- 不要把 API Key 写进前端代码
- 不要一次接多个 API
- 不要做登录、收藏、数据库
- 默认只做一个页面

优先做“只查一次、展示少量字段”的页面:

  • 搜索公开艺术品资料:输入关键词,输出标题、作者、图片。
  • 查询公开汇率或地区数据:输入一种代码,输出一个结果和更新时间。
  • 查询公开文本或开发者资料:输入关键词,输出名称、链接、摘要。

不要从金融交易、医疗、身份认证、支付、生产告警类 API 开始。它们要么高变动,要么风险边界不适合新手。

  • API 要求把 Key 放进前端页面。
  • API 文档只写“免费试用”,但没说额度和费用。
  • public-apis 标注 CORS 为 NoUnknown,而你只会写前端页面。
  • 请求失败时 AI 只写 console.log,页面没有提示。
  • AI 建议一次聚合多个 API。
  • AI 开始加登录、数据库、部署和支付。
  • 你知道 API 是否需要认证。
  • 你知道 HTTPS 和 CORS 是否适合前端直接请求。
  • 页面只做一个查询动作。
  • 有加载中、成功、失败、无结果四种状态。
  • 失败提示不是空白页。
  • 不在前端暴露 API Key。
  • 选了需要复杂注册或付费的 API。
  • 直接把 API Key 写进前端代码。
  • 没有处理请求失败。
  • 一次做多个 API 聚合,范围过大。

完成这个页面后,再用 代码审查提示词 检查是否泄露 Key、是否缺失败状态。如果你准备把它部署到公网,先确认 API 服务条款和调用额度。