So erstellen und nutzen Sie Mock-APIs in React-Apps mit Mirage.js

Leser wie Sie unterstützen MUO. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Mehr lesen.

Bei der Entwicklung von Full-Stack-Anwendungen basiert ein erheblicher Teil der Frontend-Arbeit auf Echtzeitdaten vom Backend.

MUO-Video des Tages Scrollen Sie, um mit dem Inhalt fortzufahren

Dies kann bedeuten, dass Sie mit der Entwicklung der Benutzeroberfläche warten müssen, bis die API zur Verwendung verfügbar ist. Allerdings kann das Warten darauf, dass die API für die Einrichtung des Frontends bereit ist, die Produktivität erheblich verringern und die Projektlaufzeit verlängern.

Wo kann man gebrauchte Computerteile kaufen?

Eine gute Lösung für diese Herausforderung ist die Verwendung von Schein-APIs. Mit diesen APIs können Sie Ihr Frontend mithilfe von Daten entwickeln und testen, die die Struktur der realen Daten nachahmen, ohne auf die eigentliche API angewiesen zu sein.

Erste Schritte mit Mirage.js-Mock-APIs

Mirage.js ist eine JavaScript-Bibliothek, mit der Sie Schein-APIs erstellen können, einschließlich eines Testservers, der auf der Clientseite Ihrer Webanwendung ausgeführt wird. Das bedeutet, dass Sie Ihren Frontend-Code testen können, ohne sich Gedanken über die Verfügbarkeit oder das Verhalten Ihrer echten Backend-API machen zu müssen.

Ein Laptop steht auf einem Schreibtisch und der Code ist auf dem Bildschirm geöffnet.

Um Mirage.js verwenden zu können, müssen Sie zunächst Schein-API-Endpunkte erstellen und die Antworten definieren, die sie zurückgeben sollen. Anschließend fängt Mirage.js alle HTTP-Anfragen ab, die Ihr Frontend-Code stellt, und gibt stattdessen die Scheinantworten zurück.

Sobald Ihre API bereit ist, können Sie ganz einfach auf deren Verwendung umsteigen, indem Sie lediglich die Konfiguration von Mirage.js ändern.

Kannst du Netflix auf Nintendo Switch ansehen?