Anfragenbegrenzung in JavaScript: Wie man die API nicht zum Absturz bringt

Rate Limiting und Throttling in JavaScript: Schutz und Leistung

Haben Sie sich jemals gefragt, warum Ihr Lieblingsdienst nach ein paar Dutzend schnellen Klicks auf die Schaltfläche „Senden“ plötzlich nicht mehr reagiert? Oder warum einige Websites Sie bitten, „30 Sekunden zu warten“, bevor Sie ein Formular erneut senden? Die Antwort liegt in zwei leistungsstarken Mechanismen, die das Backend vor Überlastung und die Benutzer vor „Fehlern“ bewahren: Rate Limiting und Throttling.

In diesem Artikel werden wir untersuchen, wie man diese Techniken in reinem JavaScript und Node.js anwendet. Sie erfahren, wie sich Throttle von Debounce unterscheidet, wie Sie einen einfachen Rate Limiter für eine API schreiben und warum Ihre Website schneller läuft. Los geht's!

Was ist Rate Limiting und warum wird es benötigt?

Rate Limiting (Anfragenbegrenzung) ist ein Schutzmechanismus, der die Anzahl der Anfragen von einem Client (oder einer IP-Adresse) innerhalb eines bestimmten Zeitraums begrenzt. Stellen Sie sich eine Schranke vor: Ein Auto kann passieren, aber nur einmal alle 10 Sekunden.

Wo wird dies angewendet?

\n
• Schutz von APIs vor DDoS-Angriffen und Spam.
\n
• Verhinderung von Serverüberlastung bei Massenanfragen.
\n
• Kontrolle der Ressourcennutzung bei kostenpflichtigen APIs (z. B. 100 Anfragen pro Stunde).
\n
• Schutz vor Fehlern durch „Endlosschleifen“ auf dem Client.
\n

Im Gegensatz zum Throttling, das den Anfragenstrom glättet, ist Rate Limiting eine harte Grenze: „Stopp, du hast das Limit überschritten“.

Throttling vs Debounce: Der Hauptunterschied

Throttling und Debounce werden oft verwechselt. Lassen Sie uns Klarheit schaffen.

\n
• Throttle – stellt sicher, dass eine Funktion nicht öfter als einmal alle N Millisekunden aufgerufen wird. Stellen Sie sich einen Wasserhahn vor: Sie öffnen ihn, und das Wasser fließt mit konstanter Geschwindigkeit, selbst wenn Sie den Griff schneller betätigen.
\n
• Debounce – verzögert den Aufruf einer Funktion, bis N Millisekunden nach dem letzten Ereignis vergangen sind. Ideal für die Suche mit Autovervollständigung: Während der Benutzer tippt, wird keine Anfrage gesendet.
\n

Im Kontext des Rate Limitings interessiert uns hauptsächlich Throttle – wir möchten die Häufigkeit kontrollieren, nicht Anfragen verzögern.

Einfachster Rate Limiter in JavaScript

Lassen Sie uns unsere eigene Implementierung eines Rate Limiters in Node.js schreiben. Er speichert den Zeitpunkt der letzten Anfrage jedes Benutzers und blockiert zu häufige Zugriffe.

class RateLimiter {\n  constructor(limit, windowMs) {\n    this.limit = limit;          // Maximale Anzahl von Anfragen\n    this.windowMs = windowMs;    // Zeitfenster in ms\n    this.requests = new Map();   // Speicher: userId -> [timestamps]\n  }\n\n  allow(userId) {\n    const now = Date.now();\n    const userRequests = this.requests.get(userId) || [];\n    \n    // Entferne veraltete Einträge\n    const recentRequests = userRequests.filter(\n      ts => now - ts < this.windowMs\n    );\n    \n    if (recentRequests.length >= this.limit) {\n      console.log(`Rate limit überschritten für ${userId}`);\n      return false;\n    }\n    \n    recentRequests.push(now);\n    this.requests.set(userId, recentRequests);\n    return true;\n  }\n}\n\n// Verwendung\nconst limiter = new RateLimiter(5, 60000); // 5 Anfragen pro Minute\n\n// Simulation von Anfragen\nfor (let i = 0; i < 10; i++) {\n  setTimeout(() => {\n    const allowed = limiter.allow('user123');\n    console.log(`Anfrage ${i+1}: ${allowed ? '✅ Erlaubt' : '❌ Blockiert'}`);\n  }, i * 2000); // Alle 2 Sekunden\n}

Dieser Code eignet sich hervorragend für Bildungszwecke, aber in der Produktion sollten Sie besser auf fertige Lösungen zurückgreifen (z. B. express-rate-limit für Express oder rate-limiter-flexible).

Throttling auf dem Client: Schutz vor schnellen Klicks

Oft tritt das Problem auf der Client-Seite auf: Der Benutzer klickt mehrmals auf die Schaltfläche „Senden“, und die Anfragen werden parallel gesendet. R