Warte nicht! Verspotte die API

Die moderne Entwicklung von Webanwendungen beinhaltet häufig eine lockere Kopplung zwischen Front-End und Back-End, die häufig von getrennten Teams behandelt werden. Dies kann zu Synchronisationsherausforderungen führen. Eine Lösung besteht darin, die Back-End-API zu simulieren und einen "gefälschten" Server zu erstellen, der das erwartete Verhalten nachahmt. Dieser Prozess wird als Verspottung bezeichnet. Im Idealfall ermöglicht das Verspotten die Front-End-Entwicklung unabhängig, ohne direkte Back-End-Abhängigkeit. Während mehrere spöttische Ansätze existieren, kann dies entmutigend sein.

Dieser Artikel zeigt ein effektives API-Verspottung und seine Implementierung in neuen oder vorhandenen Anwendungen unter Verwendung eines Framework-Agnostic-Ansatzes (anwendbar für Rahmen- oder Vanille-JavaScript).

Mirage: Eine clientseitige Spottlösung

Wir werden Miragejs verwenden, ein kundenseitiges Verspottungsrahmen. Mirage arbeitet im Browser und schließt XMLHttpRequest ab und Fetch Anfragen zur Simulation von API -Antworten ab. Es bietet eine benutzerfreundliche Oberfläche und vereinfacht den Verspottungsvorgang.

Wir erstellen eine einfache Aufgabenanwendung mit Vue (obwohl der Ansatz rahmenunabhängig ist).

Mirage einrichten

Mirage installieren:

 # NPM
npm i Miragejs -d

# Garn
Garn Fügen Sie Miragejs -d hinzu

Optimale Ordnerstruktur:

 <code>/ ├── public ├── src │ ├── api │ │ └── mock │ │ ├── fixtures │ │ │ └── get-tasks.js │ │ └── index.js │ └── main.js ├── package.json └── package-lock.json</code>

Erstellen api/mock/index.js :

 // api/mock/index.js
{Server} aus 'Miragejs' importieren;

Standardfunktion exportieren ({{Environment = 'Development'} = {}) {
    Neuen Server zurückgeben ({{{
        Umfeld,
        Routes () {
            // hier definierte Routen
        },
    });
}

In der Bootstrap -Datei Ihrer Anwendung (z. B. src/main.js für VUE):

 // main.js
Import createserver von './api/mock/index';

if (process.env.node_env === 'Entwicklung') {
    CreateServer ();
}

Diese bedingte Gewährleistung, dass Mirage von Produktionsbauten ausgeschlossen ist.

Wie Mirage funktioniert

Mirage ist die clientseitige Nutzung der Pretender-Bibliothek. Pretender Intercepts Anfragen, wodurch verhindert wird, dass sie den tatsächlichen Server erreichen und an den simulierten Mirage -Server weiterleiten. Die Registerkarte "Netzwerk" von Devtools zeigt keine Mirage -Anfragen an, da sie intern behandelt werden.

Bearbeitungsanfragen

Erstellen wir einen A /api/tasks -Endpunkt, um Aufgabenelemente (mit Axios) zu holen:

 // Komponenten/Aufgaben.vue
Standard ausführen {
    async erstellt () {
        versuchen {
            const {data} = warte axios.get ('/api/tasks');
            this.tasks = Data.Tasks;
        } catch (e) {
            console.Error (e);
        }
    }
};

Mirage protokolliert zunächst einen Fehler, der eine undefinierte Route angibt. Wir addieren dies, indem wir den Routenhandler in api/mock/index.js hinzufügen:

 // api/mock/index.js
Routes () {
    this.get ('/api/tasks', () => ({{
        Aufgaben: [
            {ID: 1, Text: "Feed the Cat"},
            {id: 2, text: "waschen die spüger"},
        ],
    }));
},

Mirage unterstützt verschiedene HTTP -Methoden ( get , post , patch , put , delete , options ).

Dynamische Daten mit der Datenschicht von Mirage

Für dynamische Daten bietet Mirage einen seeds und eine leichte Datenbank. Lassen Sie uns Refaktor:

 // api/mock/index.js
Samen (Server) {
    server.db.loaddata ({{
        Aufgaben: [
            {ID: 1, Text: "Feed the Cat"},
            {id: 2, text: "waschen die spüger"},
        ],
    });
},

Routes () {
    this.get ('/api/tasks', (schema) => {
        Rückgabeschema.db.tasks;
    });
    this.post ('/api/tasks', (schema, request) => {
        const task = json.Parse (Request.RequestBody) .Data;
        return schema.db.tasks.insert (Aufgabe);
    });
    this.delete ('/api/tasks/: id', (schema, request) => {
        const id = request.params.id;
        return schema.db.tasks.remove (id);
    });
}

Der schema -Parameter in Routenhandlern bietet Zugriff auf die Mirage -Datenbank. Der request enthält Anforderungsdetails.

Integration von Mirage in vorhandene Anwendungen

Um Mirage in eine vorhandene Anwendung zu integrieren, verwenden Sie die passthrough() -Methode, um nicht behandelte Anforderungen zu behandeln:

 Routes () {
    this.get ('/api/tasks', () => {...});
    this.passhrough (); // unberechtigte Anfragen umgehen
}

Sie können auch eine benutzerdefinierte urlPrefix angeben:

 Routes () {
    this.urlprefix = 'https: //devenv.ourapp.example';
    this.get ('/tasks', () => {...});
}

Dies ermöglicht einen nahtlosen Übergang zwischen Mirage und der realen API.

Abschluss

MirageJS bietet eine optimierte, clientseitige Lösung für die API-Verspottung und beseitigt die Notwendigkeit externer Prozesse oder serverseitiges Wissen. Seine Benutzerfreundlichkeit und leistungsstarke Funktionen machen es zu einem wertvollen Werkzeug für Front-End-Entwickler. In der offiziellen Dokumentation von MirageJS finden Sie fortgeschrittenere Funktionen und Tutorials. Ein funktionierendes Beispiel finden Sie auf GitHub.

Das obige ist der detaillierte Inhalt vonWarte nicht! Verspotte die API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!