在Web开发中,获取数据是常见的任务之一。fetch是一种在JavaScript中发送HTTP请求和获取响应的方法。fetch使用Promise对响应进行封装,比传统的XHR请求更容易使用。本文将介绍如何在JavaScript中使用Fetch,并提供一个实际的示例。
9 W3 [3 c1 R, l$ T' t* w: {发送请求
: A8 G# |3 w( ~; P( D, W使用fetch发送请求很简单,只需要提供请求URL和可选参数即可。. ]% c1 y. S1 i2 b, V
- fetch('https://www.XXX.com/todos/1')
- .then(response => response.json())
- .then(data => console.log(data));
在上面的示例中,我们向一个API发送了一个请求,并用.then()方法链式地调用了两个回调函数。 6 \- e- A, `$ I
第一个.then()方法的参数是响应对象response。它提供了很多有用的方法,例如.json(),它将响应转换为JSON格式。
3 @9 o# p2 g3 n; Q0 _ A第二个.then()方法的参数是由.json()解析出的数据对象data。在这个示例中,我们只是将数据输出到控制台上。 % h6 u; d, e2 w
在这里需要注意的是,fetch随着Promise的链式调用而进入回调函数,如果遇到了错误,它会返回rejected状态的Promise对象。因此,在终止回调链之前应始终使用.catch()处理错误。
9 q+ ^8 k4 ^3 u$ s7 T7 c- fetch('https://www.XXX.com/todos/0')
- .then(response => {
- if (!response.ok) {
- throw new Error('网络错误');
- }
- return response.json();
- })
- .then(data => console.log(data))
- .catch(error => console.log(error));
在上面的示例中,我们向一个不存在的API发送了一个请求,因此响应对象的.ok属性为false。在.then()方法中,我们使用throw语句来抛出一个错误。在.catch()方法中,我们捕获了这个错误并输出它的信息。 ! J$ G0 I& X! n( V
发送POST请求
* B, W( ~& P. i- j5 vfetch也可以用来发送POST请求。要发送POST请求,需要使用Request对象传递请求方法和请求头。要注意的是,fetch默认使用GET请求。
$ L9 y+ |9 u( G/ R: g- fetch('https://www.XXX.com/api', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- username: 'user',
- password: 'pass'
- })
- }).then(response => response.json())
- .then(data => console.log(data));
在上面的示例中,我们向一个API发送了一个POST请求。我们使用JSON.stringify()将待发送的数据对象转换为JSON格式,并在请求头中设置Content-Type。 ( H$ X+ `0 n& y5 j z% l
处理二进制数据- }3 V( Z% r* L2 \% F
fetch也可以处理二进制数据,如Blob、File和FormData等。以下是一个示例代码,演示如何下载二进制文件:
3 s: N, [4 b( L6 O- fetch('https://www.XXX.com/img.png')
- .then(response => response.blob())
- .then(blob => {
- const url = URL.createObjectURL(blob);
- const img = document.createElement('img');
- img.src = url;
- document.body.appendChild(img);
- });
在上面的示例中,我们向一个URL发送了一个请求,并使用blob()方法将响应转换为Blob对象。我们使用URL.createObjectURL()方法将Blob对象转换为可用于显示图像的URL。最后,我们将图像的URL添加到文档中。
1 L9 @7 r( i, H4 v& o总结
# w. N. Y: {" H7 I4 L0 ]fetch是一种用于在JavaScript中发送HTTP请求和获取响应的方法。它使用Promise封装响应,比传统的XHR请求更容易使用。在本文中,我们介绍了如何使用fetch发送请求、如何发送POST请求、如何处理二进制数据。fetch简单易用,使用时需要注意的是,我们需要处理rejected状态的Promise对象,以及进行错误处理。 |