浏览器内置的Fetch如何使用
Fetch是JavaScript的一种现代方式来进行网络请求,它内置在现代浏览器中,并使用Promise来管理异步操作。以下是使用内置的Fetch函数来进行网络请求的基本示例:
// 发起GET请求
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => {
if (response.ok) {
return response.json(); // 将响应解析为JSON
} else {
throw new Error("请求失败:" + response.status);
}
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
这是一个使用Fetch函数来发起GET请求的示例,然后解析响应为JSON格式。下面是这段代码的详细解释:
使用
fetch
函数,传入要请求的URL。Fetch函数返回一个Promise对象,该Promise在请求完成时会被解析。使用
.then
方法处理Promise的解析部分。在这个部分,我们首先检查响应的ok
属性,以确保HTTP状态码为200。如果状态码正常,我们使用.json()
方法将响应解析为JSON格式。如果HTTP请求失败(状态码不是200),我们抛出一个错误。
在第二个
.then
块中,我们访问解析后的数据(JSON对象)并在控制台中打印它。最后,我们使用
.catch
方法来捕获可能的错误,如网络问题或JSON解析错误。
需要注意的是,Fetch函数使用Promise,使得编写异步代码更加清晰和可读。您可以根据需要使用不同的HTTP方法,设置请求头,发送数据,等等。
请注意,Fetch API不支持跨域Cookie发送,如果您需要在跨域请求中发送Cookie,您可能需要进行额外的配置。
浏览器内置的Fetch如何使用