如果我们想要访问数据，我们需要两个.then()处理程序（回调）。但是如果我们想要操纵资源，我们只需要一个 .then()处理程序。但是，我们可以使用第二个来确保已发送值。
基本提取API模板
//基于fetch的基本模块 fetch .then(response.something) //定义返回的类型和数据格式 .then(data) // 返回的数据
注意！以上示例仅用于说明目的。如果执行它，代码将不起作用。
获取API示例
显示用户
显示用户列表
创建新用户
删除用户
更新用户
注意！资源不会真正在服务器上创建，但会返回虚假结果来模仿真实服务器。
1.显示用户
如前所述，显示单个用户的过程包括两个 .then()处理程序（回调），第一个用于定义对象，第二个用于访问数据。
请注意，只需阅读查询url字符串，/users/2我们就能理解/预测API的作用。这也是rest api 的重要意义之一
例子
fetch('https://jsonplaceholder.typicode.com/users/2') .then(response => response.json()) //定义返回的类型和数据格式 .then(data => console.log(data)) // 返回的数据 // 数据示例： // { // "id": 2, // "name": "Ervin Howell", // "username": "Antonette", // "email": "Shanna@melissa.tv", // "address": { // "street": "Victor Plains", // "suite": "Suite 879", // "city": "Wisokyburgh", // "zipcode": "90566-7771", // "geo": { // "lat": "-43.9509", // "lng": "-34.4618" // } // }, // "phone": "010-692-6593 x09125", // "website": "anastasia.net", // "company": { // "name": "Deckow-Crist", // "catchPhrase": "Proactive didactic contingency", // "bs": "synergize scalable supply-chains" // } // }
2.显示用户列表
该示例几乎与前一个示例相同，只是查询字符串是/users，而不是/users/2。
例子
fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) //定义返回的类型和数据格式 .then(data => console.log(data)) // 返回的数据 // 数据示例： // [ // { // "id": 1, // "name": "Leanne Graham", // "username": "Bret", // "email": "Sincere@april.biz", // "address": { // "street": "Kulas Light", // "suite": "Apt. 556", // "city": "Gwenborough", // "zipcode": "92998-3874", // "geo": { // "lat": "-37.3159", // "lng": "81.1496" // } // }, // "phone": "1-770-736-8031 x56442", // "website": "hildegard.org", // "company": { // "name": "Romaguera-Crona", // "catchPhrase": "Multi-layered client-server neural-net", // "bs": "harness real-time e-markets" // } // } // 更多... // ]
3.创建新用户
这个看起来与前面的例子有点不同。如果熟悉HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT。这些方法是简单描述要执行的操作类型的动词，主要用于操作服务器上的资源/数据。
无论如何，为了使用Fetch API创建新用户，我们需要使用HTTP谓词POST。但首先，我们需要在某处定义它。幸运的是，Init我们可以传递一个可选参数，用于定义自定义设置的URL，例如方法类型，正文，凭据，标题等。
例子
fetch('https://jsonplaceholder.typicode.com/users',{ method: 'POST', body: JSON.strignify({ username: '张三', email: 'elonasdfk@gmail.com', userId: 1 }), headers: { 'Content-Type': 'application/json;charset=utf-8'} })
4.删除用户
为了删除用户，我们首先需要定位用户/users/1，然后我们定义方法类型DELETE。
例子
fetch('https://jsonplaceholder.typicode.com/users/1',{ methods: 'DELETE' })
5.更新用户
HTTP谓词PUT用于操作目标资源，如果要进行部分更改，则需要使用PATCH。
例子
fetch('https://jsonplaceholder.typicode.com/users',{ method: 'PUT', body: JSON.strignify({ username: '张三', email: 'elonasdfk@gmail.com', userId: 1 }), headers: { 'Content-Type': 'application/json;charset=utf-8'} })
结论
现在，你已基本了解如何使用JavaScript的Fetch API从服务器检索或操作资源，以及如何处理promise。您可以使用本文作为如何构建CRUD操作的API请求的指南。