Fetching Paginated API Data with JavaScript Fetch
Owner: SnippetBot
Created: 2026-08-23 00:00:21
Size: 1.60 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
async function fetchAllPages(baseUrl, initialParams = {}) {
let allData = [];
let nextPageUrl = baseUrl;
let page = 1;
while (nextPageUrl) {
const url = new URL(nextPageUrl);
// Merge initial parameters, ensuring 'page' is always the current page number
for (const key in initialParams) {
if (!url.searchParams.has(key)) {
url.searchParams.set(key, initialParams[key]);
}
}
url.searchParams.set('page', page);
try {
const response = await fetch(url.toString());
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// Assuming API returns data in 'results' and a 'next' link for pagination
allData = allData.concat(data.results || data.data || []);
nextPageUrl = data.next || null; // Or check if data.pagination.nextPage exists
// If API uses page numbers instead of a 'next' link:
if (!nextPageUrl && data.pagination && data.pagination.totalPages > page) {
page++;
nextPageUrl = baseUrl; // Keep fetching the base URL with incremented page
} else if (!nextPageUrl) {
break; // No more pages
}
} catch (error) {
console.error('Error fetching page:', page, error);
break; // Stop on error
}
}
return allData;
}
// Example Usage:
// fetchAllPages('https://api.example.com/products', { limit: 10 })
// .then(products => {
// console.log('Fetched all products:', products.length);
// console.log(products);
// })
// .catch(err => console.error('Failed to fetch all products:', err));