Effiziente API-Nutzung für große Datenmengen in JavaScript

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:

• Verwaltung großer Datenmengen: Abrufen großer Datensätze inkrementell, um eine Überlastung Ihres Systems zu vermeiden.
• Paginierung: Die meisten APIs, einschließlich der Storyblok Content Delivery API, geben Daten in Seiten zurück. Wir werden untersuchen, wie man die Paginierung für einen effizienten Datenabruf verwaltet.
• Ratenlimits: APIs legen oft Ratenlimits fest, um Missbrauch zu verhindern. Wir werden sehen, wie wir diese Grenzen erkennen und handhaben können.
• Retry-After-Mechanismus: Wenn die API mit dem Statuscode 429 (Too Many Requests) antwortet, implementieren wir den „Retry-After“-Mechanismus, der angibt, wie lange vor einem erneuten Versuch gewartet werden muss, um reibungslose Daten sicherzustellen holen.
• Gleichzeitige Anfragen: Das parallele Abrufen mehrerer Seiten kann den Prozess beschleunigen. Wir verwenden Promise.all() von JavaScript, um gleichzeitige Anfragen zu senden und die Leistung zu steigern.
• Speicherlecks vermeiden: Der Umgang mit großen Datensätzen erfordert eine sorgfältige Speicherverwaltung. Wir verarbeiten Daten in Blöcken und sorgen dank Generatoren für speichereffiziente Vorgänge.

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.

Was Sie bei der Verwendung der Storyblok Content Delivery API beachten sollten

Bevor Sie in den Code eintauchen, sind hier einige wichtige Funktionen der Storyblok-API, die Sie berücksichtigen sollten:

• CV-Parameter: Der CV-Parameter (Content Version) ruft zwischengespeicherte Inhalte ab. Der CV-Wert wird in der ersten Anfrage zurückgegeben und sollte in nachfolgenden Anfragen übergeben werden, um sicherzustellen, dass dieselbe zwischengespeicherte Version des Inhalts abgerufen wird.
• Paginierung mit Seite und pro Seite: Verwenden der Parameter page und per_page, um die Anzahl der in jeder Anfrage zurückgegebenen Elemente zu steuern und die Ergebnisseiten zu durchlaufen.
• Gesamtkopfzeile: Die Gesamtkopfzeile der ersten Antwort gibt die Gesamtzahl der verfügbaren Elemente an. Dies ist wichtig für die Berechnung, wie viele Datenseiten abgerufen werden müssen.
• Umgang mit 429 (Ratenbegrenzung): Storyblok erzwingt Ratenbegrenzungen; Wenn Sie darauf klicken, gibt die API den Status 429 zurück. Verwenden Sie den Retry-After-Header (oder einen Standardwert), um zu erfahren, wie lange gewartet werden muss, bevor die Anforderung erneut versucht wird.

JavaScript-Beispielcode mit fetch() für die Verarbeitung großer Datenmengen

So habe ich diese Konzepte mithilfe der nativen Abruffunktion in JavaScript implementiert.
Bedenken Sie Folgendes:

• Dieses Snippet erstellt als Beispiel eine neue Datei mit dem Namen „stories.json“. Wenn die Datei bereits existiert, wird sie überschrieben. Wenn Sie also bereits eine Datei mit diesem Namen im Arbeitsverzeichnis haben, ändern Sie den Namen im Code-Snippet.
• Da die Anfragen parallel ausgeführt werden, ist die Reihenfolge der Storys nicht garantiert. Wenn beispielsweise die Antwort auf die dritte Seite schneller ist als die Antwort auf die zweite Anfrage, liefern die Generatoren die Geschichten der dritten Seite vor den Geschichten der zweiten Seite.
• Ich habe das Snippet mit Bun getestet :)

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}`);

Wichtige Schritte erklärt

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.

Abschluss

In diesem Artikel haben wir die wichtigsten Überlegungen bei der Nutzung von APIs in JavaScript mithilfe der nativen Abruffunktion behandelt. Ich versuche damit klarzukommen:

• Große Datensätze: Abrufen großer Datensätze mithilfe der Paginierung.
• Paginierung: Verwalten der Paginierung mit Seiten- und Per_page-Parametern.
• Ratenlimits und Wiederholungsmechanismus: Verarbeitung von Ratenlimits und Wiederholen von Anfragen nach der entsprechenden Verzögerung.
• Gleichzeitige Anfragen: Paralleles Abrufen von Seiten mithilfe von JavaScripts Promise.all(), um den Datenabruf zu beschleunigen.
• Speicherverwaltung: Verwendung von JavaScript-Generatoren (Funktion* und for waiting...of), um Daten zu verarbeiten, ohne übermäßig viel Speicher zu verbrauchen.

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.

Referenzen

• JavaScript-Generatoren
• Binieren Sie die JavaScript-Laufzeitumgebung
• Die Storyblok Content Delivery API

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!