JSON Server伪REST API POST请求提交数据未存入接口问题

问题根因 #

你当前使用的是Typicode官方托管的在线JSON Server服务，该服务天生不支持持久化写入操作，所有POST、PUT、DELETE类修改请求只会返回模拟的成功响应，不会实际修改你绑定的GitHub仓库中的db.json文件，也不会将提交的数据持久存储，后续重新请求接口或者刷新页面后数据就会恢复到初始状态。

你当前代码的then回调没有对接口返回的响应做校验，只是默认请求成功就执行后续逻辑，所以即使没有实际写入数据，也会打印成功日志。你可以通过如下方式验证服务的行为：

fetch("https://my-json-server.typicode.com/<github_id>/<github_repo>/blogs/", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(blog),
    }).then(res => {
      // 打印响应状态和返回数据，你会看到返回201创建成功，但数据仅为模拟返回，未实际存储
      console.log(res.status)
      return res.json()
    }).then(resData => {
      console.log("接口返回数据", resData)
      console.log("blog added");
      console.log(blog);
      setTitle("");
      setBody("");
      setAuthor("adam");
      setIsLoading(false);
      history.push("/");
    });

解决方案 #

• 本地部署JSON Server使用：全局安装json-server依赖，启动时指定本地的db.json文件并加上--watch参数，这种场景下所有写入操作都会真实修改本地的db.json文件，数据会持久生效。
• 若需要在线可写入的Mock接口，可自行在云服务器部署JSON Server并开启写入权限，或更换为其他支持持久化存储的Mock服务。
• 如果是本地启动的JSON Server也出现该问题，检查启动命令是否遗漏--watch参数，未加该参数时服务不会把写入操作同步到本地文件。

内容的提问来源于stack exchange，提问作者xiang