fetch
文章目录
- 前言
- Fetch
- Request
- Response
- response.headers
- 实例
- 基本提取API模板
- 1.显示用户
- 2.显示用户列表
- 3.创建新用户
- 4.删除用户
- 5.更新用户
- 结论
前言
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
Fetch API 提供了一个获取资源的接口（包括跨域）。任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。
这是官方API中的第一句话，可以看出fetch是Web API中新增的，用于取代XMLHttpRequest的网络请求框架，它比之更强大。下面我们来了解它的使用。
Fetch
fetch返回的其实是一个Promise函数。我们先来看一个完整的请求代码：
const url = '192.168.32.45:8081/login.shtml'
fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: 'fll',
password: '123'
})
})
.then((response) => {
if(response.status == 200) {
return response
}
})
.then((data) => {
return data.text()
}).then((text) => {
console.log('请求成功', text)
}).catch((err) => {
console.log('请求错误', err)
})
fetch的参数有两个参数，第一个是url，就是请求的路径；
Request
另一个是Request对象，包括一下几种：
method: 请求方法：GET、POST。headers：请求头信息，形式为Headers对象或者ByteString。上述例子就是一个json请求的请求头。body: 请求参数：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 - HEAD 方法的请求不能包含 body 信息。mode：请求的模式。如 cors, no-cors, same-origin, navigatecache: 缓存模式，如default, reload, no-cache
详细信息请参考Request
如果你对请求头不太熟悉的，可以参考Headers
Response
上面我们说了fetch的返回的是一个Promise对象。然后会携带Response 对象。
- Response对象：
-
属性：
status (number)- HTTP请求结果参数，在100–599 范围， 200 为成功statusText (String)- 服务器返回的状态报告ok (boolean)- 如果返回200表示请求成功则为trueheaders (Headers)- 返回头部信息，下面详细介绍url(String)- 请求的地址
-
方法：
text()- 以string的形式生成请求textjson-生成JSON.parse(responseText)的结果blob- 生成一个BlobarrayBuffer()- 生成一个ArrayBufferformData- 生成格式化的数据，用于其他请求
-
其他方法：
clone()Response.error()Response.redirect()
-
response.headers
has(name) (boolean)- 判断是否存在该信息头get(name) (String)- 获取信息头的数据getAll(name) (Array)- 获取所有头部数据set(name, value)- 添加headers的内容delete(name)- 删除header的信息forEach- 循环读取header的信息
实例
如果我们想要访问数据，我们需要两个.then()处理程序（回调）。但是如果我们想要操纵资源，我们只需要一个 .then()处理程序。但是，我们可以使用第二个来确保已发送值。
第一个response它只是一个 HTTP 响应，而不是真的JSON。为了获取JSON的内容，我们可以使用json()方法，除了
resonance.json()还有resonance.text() 等等；详情请看mozilla官方文档
基本提取API模板
//基于fetch的基本模块
fetch
.then(response.something) //定义返回的类型和数据格式 resonance.json()
.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": "[email protected]",
// "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": "[email protected]",
// "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: '[email protected]',
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: '[email protected]',
userId: 1
}),
headers: { 'Content-Type': 'application/json;charset=utf-8'}
})
结论
现在，你已基本了解如何使用JavaScript的Fetch API从服务器检索或操作资源，以及如何处理promise。您可以使用本文作为如何构建CRUD操作的API请求的指南。
就个人而言，我觉得Fetch API是声明性的，就算没有任何技术编码经验，你也可以很容易地理解发生了什么。
参考：
https://juejin.im/post/5a60031f6fb9a01cb0495d1d
https://juejin.im/post/5beb8eefe51d450f9461c481