在Web开发中，获取数据是常见的任务之一。fetch是一种在JavaScript中发送HTTP请求和获取响应的方法。fetch使用Promise对响应进行封装，比传统的XHR请求更容易使用。本文将介绍如何在JavaScript中使用Fetch，并提供一个实际的示例。" [7 u5 C* q: O 发送请求 1 ?5 ?$ z% \5 T$ A 使用fetch发送请求很简单，只需要提供请求URL和可选参数即可。; M D8 w- P* V3 \8 | fetch('https://www.XXX.com/todos/1')
.then(response => response.json())
.then(data => console.log(data)); - c3 p, s; P4 G5 K+ v' C9 o 第一个.then()方法的参数是响应对象response。它提供了很多有用的方法，例如.json()，它将响应转换为JSON格式。* J/ p3 l3 `1 c1 F / o; S# J; m9 I4 x0 P& N: ~ 在这里需要注意的是，fetch随着Promise的链式调用而进入回调函数，如果遇到了错误，它会返回rejected状态的Promise对象。因此，在终止回调链之前应始终使用.catch()处理错误。/ V& I1 O& B4 G" g; m1 ]; b$ H 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)); 7 _9 `9 O4 g, e 发送POST请求 / x( E% w+ o) a, D2 O5 T7 F 9 `9 j; T, w3 f3 M% E 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)); o( C8 D' l8 J. u. M: U, Q v 处理二进制数据 " ~: }4 y+ K+ S- H5 ]9 G8 h fetch也可以处理二进制数据，如Blob、File和FormData等。以下是一个示例代码，演示如何下载二进制文件：- c9 k+ a* N) M7 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);
}); . `2 a1 D/ I3 I% S+ H6 @+ w0 `- k 总结 . u- R4 F9 M9 Y$ c fetch是一种用于在JavaScript中发送HTTP请求和获取响应的方法。它使用Promise封装响应，比传统的XHR请求更容易使用。在本文中，我们介绍了如何使用fetch发送请求、如何发送POST请求、如何处理二进制数据。fetch简单易用，使用时需要注意的是，我们需要处理rejected状态的Promise对象，以及进行错误处理。 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2023-7-23 07:09:33