前言

restful是一种在JavaScript中常用的设计风格，用于构建可扩展和灵活的网络应用程序和API。它基于资源的概念，通过使用统一的接口（如GET、POST、PATCH、DELETE）来操作这些资源。restful API具有无状态性，这意味着服务器不会保留客户端的状态信息，每个请求都包含了足够的信息以便服务器理解和处理。这种自我描述的设计模式简化了服务器实现，并提供了一种机制来描述资源的类型、关系和支持的操作。通过使用JavaScript中的框架和库，如Express.js和Node.js，我们可以轻松地构建符合restful原则的应用程序和服务。

1.准备工作

对后端文件夹 npm init -y 初始化
导入npm json-server
自定义一个json文件放入后端文件夹，并填充数据
修改后端文件脚本为"dev": "json-server （json文件名称）"
运行 npm run dev
下载postman软件直接在端口进行操作便于后面理解

这个时候我们后端的文件夹就是这样的

我定义的json文件如下（只截取部分）

2.测试功能

我们在运行npm run dev的时候，会给我们弹出两个端口，这是由于我们新建的json文件对象中有两个数组导致的。

打开不同的端口分别对应我们不同的对象数组。

接下来就开始我们的操作啦!

3.restful

3.1 GET

这是我们默认的操作方式进行资源的读取，我们打开postman软件，

输入我们的端口位置（定位到对象数组，如果要详细也可以精确到某一个对象id），选择body和raw，JSON（达到我们需要效果的基本参数），然后我们就可以在下方的响应框获取到值啦，我们可以发现就是我们自己设置的值。

3.2 POST

我们使用post进行数据的增加，这里我们也要定位到对象数组去，往这里面加数据。

我们这个时候会发现我们的文件里确实多了一条数据，那么我们的数据就增加成功啦！

3.3 PATCH

我们使用PATCH进行数据的修改。我们要定位到具体的数据，我们在这里将张总的名称改掉。

大家可以发现我们修改成功！

3.4 DELETE

我们使用DELETE进行数据的删除，也是要定位到具体的数据。

这个时候我们的张总就被删除啦！

可以发现我们的这个位置已经不存在张总了。

4. 在编译器里我们自己完成

 function getAjaxUserData() {
      return new Promise((resolve, reject) => {
        fetch('http://localhost:3000/users')
          .then(data => {
            return data.json()
          })
          .then(data => {
            resolve(data)
          })
      })
    }

因为我们之前讲过fetch本质上是由js原生获取端口信息的方式加上promise的方式处理成的异步变同步的方法。由于最后在转换的时候还需要一丢丢时间，因此为了达到高标准，我们再次进行promise封装，这样子最终返回的便是直接可以用的数据。非常的nice！

 (async function () {
      const users = await getAjaxUserData()
      console.log(users);
    })()

然后我们进行数据的打印。

没有问题，开始我们接下来的操作。由于patch方法没有权限，就不展示，基本原理都是一样的。

4.1 post

因为默认的方式为get，我们已经了解，我们便直接从post开始。

   fetch('http://localhost:3000/users', {
      method: 'post',
      body: JSON.stringify({
        "id": "6",
        "name": "老刘",
        "hometown": "北京"
      })
    })

我们将fetch请求方式改为post，然后传入一个json字符串，最终我们可以看见结果。老刘真的进去啦！

4.2 delete

这个方法只需要我们去精确到具体数据就可以，根据id删除数据，不必传入我们的参数对象。

fetch('http://localhost:3000/users/2', {
      method: 'delete',
    })

这个时候我们可以看见，id为2的同学信息已经被删除。

深入探索RESTful API精髓：构建高效与优雅的Web服务

前言