JSONPlaceholder 使用指南：用 Fetch API 实战开源假数据 REST API

后端API网关测试【免费下载链接】jsonplaceholderA simple online fake REST API server项目地址https://gitcode.com/gh_mirrors/js/jsonplaceholder点击查看免费下载JSONPlaceholder 是一个面向开发者的在线假数据 REST API 服务本文基于官方 templates/GUIDE.md 完整梳理其 6 类资源、9 种路由操作以及写操作不真正落库的核心语义并结合仓库源码src/app.js、test/app.js深入剖析其底层实现。读完本文你将掌握在 React、Vue、Node、Rails、Swift、Android 等任何需要 JSON 数据的项目中快速获取、创建、更新、过滤和嵌套查询假数据的完整方案并能把示例直接粘贴到浏览器 Console 中进行即席验证。JSONPlaceholder 是什么为开发者而生的数据占位符正如 README.md 所说JSONPlaceholder 之于数据就像图片占位符placeholder之于网页设计——当你尝试新库、写原型或跟教程时往往只需要一些现成的、无需注册即可使用的 JSON 数据而不想把时间花在注册第三方 API 客户端和理解复杂接口上。JSONPlaceholder 正是为此而生无需注册、零配置、支持 CORS 与 JSONP 跨域并支持 GET、POST、PUT、PATCH、DELETE 和 OPTIONS 等 HTTP 动词兼容 React、Angular、Vue、Ember 等主流前端框架。它的数据模型包含 6 类常见资源见 templates/index.html 中的资源表资源路径数据量/posts100 条帖子/comments500 条评论/albums100 个相册/photos5000 张照片/todos200 条待办/users10 个用户这些数据并非手写而是由 seed.js 借助 Faker、Rosie 工厂与 underscore 批量生成的10 个用户、每用户 10 条帖子、每条帖子 5 条评论、每用户 10 个相册、每相册 50 张照片、每用户 20 条待办生成结果写入 data.json。从源码结构还可以看出资源之间存在明确的一对多关系posts拥有多个comments、albums拥有多个photos、users拥有多个albums/todos/posts这正是后续嵌套资源路由的设计基础。准备工作在线使用或本地运行在线使用直接访问官方托管服务 https://jsonplaceholder.typicode.com 即可README 明确表示可以在你的开发中自由使用请求时使用http://或https://均可。本地运行仓库是一个标准的 Node.js 项目package.json 声明node: 14.x启动脚本为npm start即执行node index核心入口 index.js 仅寥寥数行——加载src/app并监听端口端口默认 3000可通过PORT环境变量覆盖npm install npm start # JSONPlaceholder listening on http://localhost:3000运行测试只需npm test执行node test/app见 package.json。另外网站本身由 build.js 构建它读取templates/GUIDE.md用 showdown 将 Markdown 转成 HTML 并填充进 templates/layout.html 布局最终输出到public/guide.html——本文内容正是该页面指南的完整来源。在浏览器 Console 中快速试玩GUIDE 中所有示例均基于浏览器原生的 Fetch API无需任何依赖。打开 DevTools 的 Console把下面任意一段代码粘贴回车即可立刻看到真实响应——这对于教学演示、接口测试和快速验证都非常高效。读取资源GET获取单个资源fetch(https://jsonplaceholder.typicode.com/posts/1) .then(response response.json()) .then(json console.log(json)) // Output { id: 1, title: [...], body: [...], userId: 1 }返回 200得到 id 为 1 的帖子对象包含id、title、body、userId四个字段。列出全部资源fetch(https://jsonplaceholder.typicode.com/posts) .then(response response.json()) .then(json console.log(json)) // Output [ { id: 1, title: [...] /* ... */ }, /* ... */ { id: 100, title: [...] /* ... */ } ]返回全部 100 条帖子组成的数组。过滤资源查询参数提供了基础的过滤能力// 返回属于第一个用户的全部帖子 fetch(https://jsonplaceholder.typicode.com/posts?userId1) .then(response response.json()) .then(json console.log(json))/posts?userId1等价于在集合中按userId字段筛选其它资源同样适用例如/comments?postId1。创建资源POST一切都是伪造的fetch(https://jsonplaceholder.typicode.com/posts, { method: POST, body: JSON.stringify({ title: foo, body: bar, userId: 1 }), headers: { Content-type: application/json; charsetUTF-8 } }) .then(response response.json()) .then(json console.log(json)) // Output { id: 101, title: foo, body: bar, userId: 1 }重要该资源并不会真正在服务器上创建而是表现得像创建了一样faked as if。也就是说如果你用 101 作为 id 再去访问这条帖子得到的将是 404。POST 请求会返回 201 状态码并生成一个递增的新 id但数据不会被持久化。更新资源PUT / PATCHPUT整体替换fetch(https://jsonplaceholder.typicode.com/posts/1, { method: PUT, body: JSON.stringify({ id: 1, title: foo, body: bar, userId: 1 }), headers: { Content-type: application/json; charsetUTF-8 } }) .then(response response.json()) .then(json console.log(json)) // Output { id: 1, title: foo, body: bar, userId: 1 }PATCH局部更新fetch(https://jsonplaceholder.typicode.com/posts/1, { method: PATCH, body: JSON.stringify({ title: foo }), headers: { Content-type: application/json; charsetUTF-8 } }) .then(response response.json()) .then(json console.log(json)) // Output { id: 1, title: foo, body: [...], userId: 1 }PUT 需要提交完整对象包括id将目标资源整体替换而 PATCH 只需提交要修改的字段响应中未涉及的字段如body保持不变。重要与创建一样资源并不会被真正更新服务器只是伪造出更新成功的样子。删除资源DELETEfetch(https://jsonplaceholder.typicode.com/posts/1, { method: DELETE })重要资源并不会被真正删除同样是伪造的——下次 GET/posts/1依然能拿到数据。嵌套资源一对多关系的自然表达JSONPlaceholder 支持一级嵌套路由通过 URL 层级直接表达父子关系。例如// 等价于 /comments?postId1 fetch(https://jsonplaceholder.typicode.com/posts/1/comments) .then(response response.json()) .then(json console.log(json))可用的嵌套路由共有 5 条https://jsonplaceholder.typicode.com/posts/1/commentshttps://jsonplaceholder.typicode.com/albums/1/photoshttps://jsonplaceholder.typicode.com/users/1/albumshttps://jsonplaceholder.typicode.com/users/1/todoshttps://jsonplaceholder.typicode.com/users/1/posts源码视角fake 模式与每次请求重置数据的实现上述写操作全部伪造的行为在源码中有明确的实现依据。在 src/app.js 中const router jsonServer.router(clone(data), { _isFake: true }) app.use((req, res, next) { if (req.path /) return next() router.db.setState(clone(data)) next() })第 6 行通过_isFake: true创建路由这正是 JSON Server 的伪造写入模式POST/PUT/PATCH/DELETE 会正常返回成功的响应体如递增的新 id但底层数据库并不会真正修改第 8-12 行的中间件更彻底——除首页/外每一次请求都会用data.json的深拷贝clone(data)重置数据库状态从而保证并发写操作、多次写操作之后数据始终恢复为原始 100 条帖子等初始状态第 14-16 行启用jsonServer.defaults()并在NODE_ENVproduction时关闭请求日志。这一设计在 test/app.js 中被显式验证测试并发发起 10 次POST /posts期望均返回 201随后检查GET /posts返回的数组长度——断言其仍然恰好为 100否则报错more than 100 posts found。这从测试层面证实了创建是伪造的、数据永不增长这一核心语义。理解这一点对实战非常重要JSONPlaceholder 适合验证请求格式、状态码与数据形状形如id: 101的返回值仅供展示但不应依赖它保存任何状态若需要真实持久化的假数据接口可考虑基于同一数据模型自建服务或使用其它持久化方案。赞分享后端API网关测试【免费下载链接】jsonplaceholderA simple online fake REST API server项目地址https://gitcode.com/gh_mirrors/js/jsonplaceholder点击查看免费下载相关推荐React 实战用 useEffect fetch 拉取 JSONPlaceholder API 并将数据渲染为卡片列表React 实战用 useEffect fetch 拉取 JSONPlaceholder API 并将数据渲染为卡片列表 本文以 Sigma Web De示例工程HashCheck支持的10种哈希算法深度解析从MD5到SHA3的完整对比HashCheck支持的10种哈希算法深度解析从MD5到SHA3的完整对比 HashCheck是一款强大的Windows Shell扩展工具支持多种哈希算法开发工具JSONPlaceholder终极指南免费在线假REST API服务器的完整教程JSONPlaceholder终极指南免费在线假REST API服务器的完整教程 JSONPlaceholder是一个简单易用的在线假REST API服务器后端API网关测试上一篇九大网盘直链下载助手让你的下载速度飞起来下一篇JiYuTrainer终极指南3步快速解除极域电子教室控制限制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考