Bei der Arbeit mit APIs, die große Datenmengen verarbeiten, ist es entscheidend, den Datenfluss effizient zu verwalten und Herausforderungen wie Paginierung, Ratenbeschränkungen und Speichernutzung zu bewältigen. In diesem Artikel erfahren Sie, wie Sie APIs mithilfe der nativen Abruffunktion von JavaScript nutzen. Wir werden wichtige Themen sehen wie:
Wir werden diese Techniken mithilfe der Storyblok Content Delivery API untersuchen und erklären, wie alle diese Faktoren in JavaScript mithilfe von Fetch gehandhabt werden. Lassen Sie uns in den Code eintauchen.
Bevor Sie in den Code eintauchen, sind hier einige wichtige Funktionen der Storyblok-API, die Sie berücksichtigen sollten:
So habe ich diese Konzepte mithilfe der nativen Abruffunktion in JavaScript implementiert.
Bedenken Sie Folgendes:
import { writeFile, appendFile } from "fs/promises";
// Read access token from Environment
const STORYBLOK_ACCESS_TOKEN = process.env.STORYBLOK_ACCESS_TOKEN;
// Read access token from Environment
const STORYBLOK_VERSION = process.env.STORYBLOK_VERSION;
/**
* Fetch a single page of data from the API,
* with retry logic for rate limits (HTTP 429).
*/
async function fetchPage(url, page, perPage, cv) {
let retryCount = 0;
// Max retry attempts
const maxRetries = 5;
while (retryCount <= maxRetries) {
try {
const response = await fetch(
`${url}&page=${page}&per_page=${perPage}&cv=${cv}`,
);
// Handle 429 Too Many Requests (Rate Limit)
if (response.status === 429) {
// Some APIs provides you the Retry-After in the header
// Retry After indicates how long to wait before retrying.
// Storyblok uses a fixed window counter (1 second window)
const retryAfter = response.headers.get("Retry-After") || 1;
console.log(response.headers,
`Rate limited on page ${page}. Retrying after ${retryAfter} seconds...`,
);
retryCount++;
// In the case of rate limit, waiting 1 second is enough.
// If not we will wait 2 second at the second tentative,
// in order to progressively slow down the retry requests
// setTimeout accept millisecond , so we have to use 1000 as multiplier
await new Promise((resolve) => setTimeout(resolve, retryAfter * 1000 * retryCount));
continue;
}
if (!response.ok) {
throw new Error(
`Failed to fetch page ${page}: HTTP ${response.status}`,
);
}
const data = await response.json();
// Return the stories data of the current page
return data.stories || [];
} catch (error) {
console.error(`Error fetching page ${page}: ${error.message}`);
return []; // Return an empty array if the request fails to not break the flow
}
}
console.error(`Failed to fetch page ${page} after ${maxRetries} attempts`);
return []; // If we hit the max retry limit, return an empty array
}
/**
* Fetch all data in parallel, processing pages in batches
* as a generators (the reason why we use the `*`)
*/
async function* fetchAllDataInParallel(
url,
perPage = 25,
numOfParallelRequests = 5,
) {
let currentPage = 1;
let totalPages = null;
// Fetch the first page to get:
// - the total entries (the `total` HTTP header)
// - the CV for caching (the `cv` atribute in the JSON response payload)
const firstResponse = await fetch(
`${url}&page=${currentPage}&per_page=${perPage}`,
);
if (!firstResponse.ok) {
console.log(`${url}&page=${currentPage}&per_page=${perPage}`);
console.log(firstResponse);
throw new Error(`Failed to fetch data: HTTP ${firstResponse.status}`);
}
console.timeLog("API", "After first response");
const firstData = await firstResponse.json();
const total = parseInt(firstResponse.headers.get("total"), 10) || 0;
totalPages = Math.ceil(total / perPage);
// Yield the stories from the first page
for (const story of firstData.stories) {
yield story;
}
const cv = firstData.cv;
console.log(`Total pages: ${totalPages}`);
console.log(`CV parameter for caching: ${cv}`);
currentPage++; // Start from the second page now
while (currentPage <= totalPages) {
// Get the list of pages to fetch in the current batch
const pagesToFetch = [];
for (
let i = 0;
i < numOfParallelRequests && currentPage <= totalPages;
i++
) {
pagesToFetch.push(currentPage);
currentPage++;
}
// Fetch the pages in parallel
const batchRequests = pagesToFetch.map((page) =>
fetchPage(url, page, perPage, firstData, cv),
);
// Wait for all requests in the batch to complete
const batchResults = await Promise.all(batchRequests);
console.timeLog("API", `Got ${batchResults.length} response`);
// Yield the stories from each batch of requests
for (let result of batchResults) {
for (const story of result) {
yield story;
}
}
console.log(`Fetched pages: ${pagesToFetch.join(", ")}`);
}
}
console.time("API");
const apiUrl = `https://api.storyblok.com/v2/cdn/stories?token=${STORYBLOK_ACCESS_TOKEN}&version=${STORYBLOK_VERSION}`;
//const apiUrl = `http://localhost:3000?token=${STORYBLOK_ACCESS_TOKEN}&version=${STORYBLOK_VERSION}`;
const stories = fetchAllDataInParallel(apiUrl, 25,7);
// Create an empty file (or overwrite if it exists) before appending
await writeFile('stories.json', '[', 'utf8'); // Start the JSON array
let i = 0;
for await (const story of stories) {
i++;
console.log(story.name);
// If it's not the first story, add a comma to separate JSON objects
if (i > 1) {
await appendFile('stories.json', ',', 'utf8');
}
// Append the current story to the file
await appendFile('stories.json', JSON.stringify(story, null, 2), 'utf8');
}
// Close the JSON array in the file
await appendFile('stories.json', ']', 'utf8'); // End the JSON array
console.log(`Total Stories: ${i}`);
Hier ist eine Aufschlüsselung der entscheidenden Schritte im Code, die eine effiziente und zuverlässige API-Nutzung mithilfe der Storyblok Content Delivery API gewährleisten:
1) Abrufen von Seiten mit Wiederholungsmechanismus (fetchPage)
Diese Funktion übernimmt das Abrufen einer einzelnen Datenseite von der API. Es enthält Logik für einen erneuten Versuch, wenn die API mit dem Status 429 (Too Many Requests) antwortet, was darauf hinweist, dass das Ratenlimit überschritten wurde.
Der retryAfter-Wert gibt an, wie lange vor dem erneuten Versuch gewartet werden soll. Ich verwende setTimeout, um zu pausieren, bevor ich die nächste Anfrage stelle, und Wiederholungsversuche sind auf maximal 5 Versuche begrenzt.
2) Erste Seitenanfrage und der CV-Parameter
Die erste API-Anfrage ist entscheidend, da sie den Gesamtheader (der die Gesamtzahl der Storys angibt) und den CV-Parameter (der zum Caching verwendet wird) abruft.
Sie können den Gesamtheader verwenden, um die Gesamtzahl der erforderlichen Seiten zu berechnen, und der CV-Parameter stellt sicher, dass der zwischengespeicherte Inhalt verwendet wird.
3) Umgang mit Paginierung
Die Paginierung wird mithilfe der Abfragezeichenfolgenparameter page und per_page verwaltet. Der Code fordert 25 Storys pro Seite an (Sie können dies anpassen) und der Gesamtheader hilft bei der Berechnung, wie viele Seiten abgerufen werden müssen.
Der Code ruft Storys in Stapeln von bis zu 7 (Sie können dies anpassen) parallelen Anfragen gleichzeitig ab, um die Leistung zu verbessern, ohne die API zu überlasten.
4) Gleichzeitige Anfragen mit Promise.all():
Um den Prozess zu beschleunigen, werden mehrere Seiten parallel mit Promise.all() von JavaScript abgerufen. Diese Methode sendet mehrere Anfragen gleichzeitig und wartet, bis alle abgeschlossen sind.
Nachdem jeder Stapel paralleler Anfragen abgeschlossen ist, werden die Ergebnisse verarbeitet, um die Storys zu erhalten. Dadurch wird vermieden, dass alle Daten auf einmal in den Speicher geladen werden, was den Speicherverbrauch reduziert.
5) Speicherverwaltung mit asynchroner Iteration (für Wait...of):
Anstatt alle Daten in einem Array zu sammeln, verwenden wir JavaScript-Generatoren (Funktion* und „For Wait...of“), um jede Story beim Abrufen zu verarbeiten. Dies verhindert eine Speicherüberlastung bei der Verarbeitung großer Datenmengen.
Indem die Storys einzeln ausgegeben werden, bleibt der Code effizient und vermeidet Speicherlecks.
6) Handhabung von Ratenlimits:
Wenn die API mit einem 429-Statuscode (ratenbegrenzt) antwortet, verwendet das Skript den retryAfter-Wert. Anschließend wird die angegebene Zeit lang pausiert, bevor die Anforderung erneut versucht wird. Dies gewährleistet die Einhaltung der API-Ratenbegrenzungen und verhindert, dass zu viele Anfragen zu schnell gesendet werden.
In diesem Artikel haben wir die wichtigsten Überlegungen bei der Nutzung von APIs in JavaScript mithilfe der nativen Abruffunktion behandelt. Ich versuche damit klarzukommen:
Durch die Anwendung dieser Techniken können Sie den API-Verbrauch auf skalierbare, effiziente und speichersichere Weise handhaben.
Sie können gerne Ihre Kommentare/Feedback hinterlassen.
Das obige ist der detaillierte Inhalt vonEffiziente API-Nutzung für große Datenmengen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
