fetch
是 JavaScript 中用于发起网络请求的现代 API。它返回一个 Promise,该 Promise 解析为表示响应的 Response
对象。你可以使用 fetch
来获取资源,如 JSON 数据、HTML 页面等。
当你需要按某个键对一组结果进行分组并计算总数时,通常涉及到对从 API 获取的数据进行处理。
fetch
是基于 Promise 的,因此它是异步的,不会阻塞主线程。fetch
是现代浏览器内置的 API,广泛支持,易于学习和使用。假设你从 API 获取了一组用户数据,并希望按 role
键对用户进行分组,并计算每个角色的用户总数。
// 模拟从 API 获取的用户数据
const users = [
{ id: 1, name: 'Alice', role: 'admin' },
{ id: 2, name: 'Bob', role: 'user' },
{ id: 3, name: 'Charlie', role: 'admin' },
// ...更多用户数据
];
// 使用 fetch 模拟从 API 获取数据
function fetchUsers() {
return new Promise((resolve) => {
setTimeout(() => resolve(users), 1000);
});
}
// 按 role 分组并计算总数
async function groupUsersByRole() {
const response = await fetchUsers();
const groupedUsers = response.reduce((acc, user) => {
acc[user.role] = (acc[user.role] || 0) + 1;
return acc;
}, {});
console.log(groupedUsers);
}
groupUsersByRole();
fetch
不会在 HTTP 错误状态(如 404 或 500)时抛出错误,而是在网络故障时抛出错误。因此,你需要检查响应的状态码,并相应地处理错误。async function fetchWithErrorHandling() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Fetch error:', error);
}
}
请注意,以上代码和链接仅供参考,实际应用中可能需要根据具体情况进行调整。
领取专属 10元无门槛券
手把手带您无忧上云