GET、POST、PUT、PATCH 和 DELETE 是用于从服务器检索数据和发送数据的最常见的五种 HTTP 方法。
我们将使用这个虚假的 API 进行演示，感谢 GitHub 上的 typicode：https://jsonplaceholder.typicode.com/todos
我们还将使用 JavaScript 的 Fetch API 进行请求。Fetch API 是 JavaScript 的超级简单的内置接口，用于向服务器发出请求。 （不需要导入其他接口的日子已经过去了！）
关键术语：
- 资源：一个数据条目。
- URI：资源的 ID。
服务器 https://jsonplaceholder.typicode.com/todos 包含 200 个资源。单击链接并查看它自己。
GET 方法
GET 方法用于从服务器检索数据。这是只读方法，因此没有破坏或损坏数据的风险。例如，如果我们在 API 上调用 get 方法，我们将获得所有待办事项的列表。
让我们试试！
让我们设置一个 HTML 文件，你可以在本地浏览器上运行它。创建一个名为 index.html 的文件，并添加以下代码：
<!DOCTYPE html><html><body><h1>Get hands on with JavaScript’s Fetch API</h1><p>Write your requests in the script and watch the console and network logs.</p><script>// GET retrieve all to-do’sfetch(‘https://jsonplaceholder.typicode.com/todos').then(response => response.json()).then(json => console.log(json))// will return all resources// GET retrieves the to-do with specific URI (in this case id = 5)fetch(‘https://jsonplaceholder.typicode.com/todos/5').then(response => response.json()).then(json => console.log(json))/* will return this specific resource:{“userId”: 1,“id”: 5,“title”: “laboriosam mollitia et enim quasi adipisci quia provident illum”,“completed”: false}*/</script></body></html>
加载此文件将执行脚本。让我们来看看第一个请求：
// GET retrieve all to-do’sfetch(‘https://jsonplaceholder.typicode.com/todos').then(response => response.json()).then(json => console.log(json))// will return all resources
此请求将返回你在服务器 https://jsonplaceholder.typicode.com/todos 上看到的所有内容。响应是一个包含 200 个资源的列表，所以我不会在此处显示它。但是，你可以转到你的网络日志以查看响应。如果要查看特定资源，请只将 URI 指定为 URL，如下所示：
// GET retrieves the to-do with specific URI (in this case id = 5)fetch(‘https://jsonplaceholder.typicode.com/todos/5').then(response => response.json()).then(json => console.log(json))/* will return this specific resource:{“userId”: 1,“id”: 5,“title”: “laboriosam mollitia et enim quasi adipisci quia provident illum”,“completed”: false}*/
响应只有一个资源。
POST 方法
POST 方法将数据发送到服务器并创建新资源。创建的资源从属于某些其他父资源。当将新资源 POST 到父级时，API 服务将自动通过分配 ID（新资源 URI）将新资源关联起来。简而言之，此方法用于创建新的数据条目。
让我们试试！
Fetch API 中的 POST 方法如下所示：
// POST adds a random id to the object sentfetch(‘https://jsonplaceholder.typicode.com/todos', {method: ‘POST’,body: JSON.stringify({userId: 1,title: “clean room”,completed: false}),headers: {“Content-type”: “application/json; charset=UTF-8”}}).then(response => response.json()).then(json => console.log(json))/* will return{“userId”: 1,“title”: “clean room”,“completed”: false,“id”: 201}*/
将此代码附加到 index.html 的脚本部分。刷新你的 index.html 页面，并观察网络日志的更改。
请注意，我们需要传递请求方法、正文和标头。我们之前没有为 GET 方法传递这些内容，因为默认情况下，这些字段被配置为 GET 请求，但我们需要为所有其他类型的请求指定它们。在正文中，我们将值分配给资源的属性，字符串化。请注意，我们不需要分配 URI — API 将为我们完成。正如你从响应中看到的那样，API 为新创建的资源分配了 ID 201。 （请注意：我们正在使用的服务器是占位符服务，因此服务器只是模拟正确的响应。没有对 API 进行任何实际更改，因此如果你前往 https://jsonplaceholder.typicode.com/todos，但没有找到新添加的资源，请不要感到困惑。）
PUT 方法
PUT 方法最常用于更新现有资源。如果要更新特定资源（附带特定 URI），则可以调用 PUT 方法以请求体中包含正在尝试更新的资源的完整新版本的资源 URI。
让我们试试！
这是一个 put 方法，它请求更改具有 id 5 的任务的名称：
// PUT to the resource with id = 5 to change the name of taskfetch(‘https://jsonplaceholder.typicode.com/todos/5', {method: ‘PUT’,body: JSON.stringify({userId: 1,id: 5,title: “hello task”,completed: false}),headers: {“Content-type”: “application/json; charset=UTF-8”}}).then(response => response.json()).then(json => console.log(json))/* will return{“userId”: 1,“id”: 5,“title”: “hello task”,“completed”: false}*/
再次将此代码附加到你的 index.html 文件中，并观察网络更改。请注意，我们需要指定方法为 PUT，并且我们需要将我们传递到正文中的 JSON 对象字符串化。请注意，请求 URL 特别是我们想要更改的资源，正文包含所有资源的属性，无论是否需要更改所有属性。响应将是资源的新版本。 （再次注意，这是模拟响应。）
PATCH 方法
PATCH 方法与 PUT 方法非常相似，因为它也修改现有资源。区别在于对于 PUT 方法，请求体包含完整的新版本，而对于 PATCH 方法，请求体仅需要包含对资源的特定更改，具体来说是一组描述应如何更改该资源的说明，API 服务将根据该说明创建一个新版本。
让我们试试！
// PATCH to the resource id = 1// update that task is completedfetch(‘https://jsonplaceholder.typicode.com/todos/1', {method: ‘PATCH’,body: JSON.stringify({completed: true}),headers: {“Content-type”: “application/json; charset=UTF-8”}}).then(response => response.json()).then(json => console.log(json))/* will return{“userId”: 1,“id”: 1,“title”: “delectus aut autem”,“completed”: true}*/
正如你在这里看到的那样，请求与 PUT 请求非常相似，但请求正文仅包含需要更改的资源属性。响应是资源的新版本。
DELETE 方法
DELETE 方法用于删除其 URI 指定的资源。
让我们试试！
删除特定资源的 DELETE 请求看起来像这样：
// DELETE task with id = 1fetch(‘https://jsonplaceholder.typicode.com/todos/1', {method: ‘DELETE’})// empty response: {}
结论
任何希望构建完整应用程序的人都必须知道如何查询数据库。几乎所有应用程序都需要你从数据库中获取和存储数据。这些请求方法对于完全功能的应用程序来说已经足够了。 Javascript 的新 Fetch API 非常容易使用。无论你之前是否使用过 API，都可以轻松掌握或适应它。尽管如此，对每个请求的基本理解将使你能够适应其他类型的 HTTP 请求方法。
评论(0)