发出网络请求是前端 Web 开发人员的一项常见任务。对 Fetch api 的深入理解对于任何现代 Web 开发人员来说都是必不可少的,无论是从 API 检索数据还是将数据发送到服务器。
我已经开发网站十多年了,还记得我们不得不依赖 XMLHttpRequest 来发出网络请求的时候。我以为我当时对如何发出网络请求有很好的理解,但后来 Fetch API 的出现改变了一切。
Fetch API 是 JavaScript 发出网络请求的现代方式。它比 XMLHttpRequest 更易于使用,语法更简洁。在本文中,我将介绍 Fetch API 的基础知识以及如何在您的 Web 项目中使用它来发出网络请求。
Fetch API 是一种网络标准,允许您发出网络请求。与 XMLHttpRequest 相比,它旨在为发出网络请求提供更清晰、更易于使用的语法。Fetch API 是一个低级 API,这意味着它的功能集有限,但它也非常灵活,可以处理范围广泛的网络请求。
使用 Fetch API 的 GET 请求非常简单。您只需要要检索的资源的 URL 即可开始。
以下是使用 Fetch API 发出的GET 请求的示例:
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
在此示例中,我们将向 JSONPlaceholder API 发出 GET 请求以获取帖子列表。fetch() 方法将要检索的资源的 URL 作为其第一个参数。然后使用 .then() 方法处理服务器响应。response.json() 方法用于将响应解析为 JSON 对象,然后再次使用 .then() 方法将数据记录到控制台。最后,.catch() 方法用于记录可能发生的任何错误。
使用 Fetch API 的 POST 请求与 GET 请求一样简单。唯一的区别是我们必须包含一些数据才能发送到服务器。
以下是使用 Fetch API 发出的 POST 请求的示例:
const data = { title: 'New Post', body: 'This is a new post.' };
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
console.log(data);
// Now that we have the data, we can do something with it. For example, let's say we want to display a list of users:
const usersList = document.querySelector('#users-list');
data.forEach(user => {
const li = document.createElement('li');
li.textContent = user.name;
usersList.appendChild(li);
});
})
.catch(error => console.error(error));
就这样!您现在了解了如何使用 Fetch API 来发出网络请求。
但是等等,还有更多!
因为 Fetch API 是一个低级 API,它并没有为我们处理一些常见的问题。如果请求失败(例如,服务器返回 500 Internal Server Error),则执行 catch 块。如果服务器返回 200 OK 响应但响应主体是错误消息,则不会执行 catch 块。要处理这些情况,请检查 then() 块中的响应状态,如果不在 200 和 299 之间则抛出错误。这是最新版本的代码:
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => {
if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}
return response.json();
})
.then(data => {
console.log(data);
// Do something with the data
})
.catch(error => console.error(error));
现在就这些了,伙计们!我希望您获得了一些有关 Fetch API 的新知识和有用的知识。如果您有任何问题或意见,请通过 Twitter 与我联系。
在 JavaScript 中发出网络请求对任何 Web 开发人员来说都是至关重要的,而 Fetch API 使它变得简单。Fetch API 可以帮助您构建从简单的博客到复杂的 Web 应用程序的任何内容。所以,不要害怕立即开始使用它!
1 天前