N'attendez pas! Se moquer de l'API

Le développement d'applications Web moderne implique souvent un couplage lâche entre frontal et back-end, fréquemment géré par des équipes distinctes. Cela peut entraîner des défis de synchronisation. Une solution consiste à simuler l'API back-end, créant un "faux" serveur qui imite le comportement attendu. Ce processus est connu sous le nom de moquerie . Idéalement, la moquerie permet au développement frontal de se poursuivre indépendamment, sans dépendance directe directe. Bien qu'il existe plusieurs approches moqueuses, cela peut être intimidant.

Cet article démontre une moquerie efficace d'API et sa mise en œuvre dans des applications nouvelles ou existantes à l'aide d'une approche agnostique du cadre (applicable à tout cadre ou JavaScript de vanille).

Mirage: une solution de moquerie côté client

Nous utiliserons MirageJS, un cadre moqueur côté client. Mirage fonctionne dans le navigateur, interceptant XMLHttpRequest et Fetch les demandes pour simuler les réponses de l'API. Il fournit une interface conviviale et simplifie le processus de moquerie.

Nous allons créer une application simple à faire en utilisant VUE (bien que l'approche soit indépendante du cadre).

Configuration de Mirage

Installer Mirage:

 # npm
npm i miragejs -d

# Fil
fil Ajouter miragejs -d

Structure de dossiers optimale:

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

Créer api/mock/index.js :

 // api / mock / index.js
import {server} à partir de 'miragejs';

Exportation Fonction par défaut ({Environment = 'Development'} = {}) {
    return nouveau serveur ({
        environnement,
        routes () {
            // routes définies ici
        },
    });
}

Dans le fichier bootstrap de votre application (par exemple, src/main.js pour vue):

 // main.js
Import CreateServer à partir de './api/mock/index';

if (process.env.node_env === 'développement') {
    createServer ();
}

Ce conditionnel garantit que Mirage est exclu des constructions de production.

Comment fonctionne Mirage

Mirage est côté client, en utilisant la bibliothèque Pretender. Pretender intercepte les demandes, les empêchant d'atteindre le serveur réel et les acheminer vers le serveur Mirage simulé. L'onglet réseau de Devtools n'affichera pas les demandes de mirage, car ils sont traités en interne.

Gestion des demandes

Créons un point de terminaison A /api/tasks pour récupérer les éléments de tâche (en utilisant Axios):

 // composants / tâches.vue
Exporter par défaut {
    async créé () {
        essayer {
            const {data} = attendre axios.get ('/ api / tasks');
            this.tasks = data.tasks;
        } catch (e) {
            console.error (e);
        }
    }
};

Initialement, Mirage enregistrera une erreur indiquant une route non définie. Nous abordons cela en ajoutant le gestionnaire d'itinéraire dans api/mock/index.js :

 // api / mock / index.js
routes () {
    this.get ('/ api / tasks', () => ({
        Tâches: [
            {id: 1, texte: "Feed the Cat"},
            {id: 2, texte: "laver les plats"},
        ],
    }));
},

Mirage prend en charge diverses méthodes HTTP ( get , post , patch , put , delete , options ).

Données dynamiques avec la couche de données de Mirage

Pour les données dynamiques, Mirage fournit un crochet seeds et une base de données légère. Refactor:

 // api / mock / index.js
graines (serveur) {
    server.db.loadData ({
        Tâches: [
            {id: 1, texte: "Feed the Cat"},
            {id: 2, texte: "laver les plats"},
        ],
    });
},

routes () {
    this.get ('/ api / tasks', (schéma) => {
        retour schema.db.tasks;
    });
    this.post ('/ api / tasks', (schéma, demande) => {
        const task = JSON.Parse (request.requestbody) .data;
        return schema.db.tasks.insert (tâche);
    });
    this.delete ('/ api / tasks /: id', (schéma, demande) => {
        const id = request.params.id;
        return schema.db.tasks.remove (id);
    });
}

Le paramètre schema des gestionnaires de routes donne accès à la base de données Mirage. Le paramètre request contient les détails de la demande.

Intégrer mirage dans les applications existantes

Pour intégrer Mirage dans une application existante, utilisez la méthode passthrough() pour gérer les demandes non gérées:

 routes () {
    this.get ('/ api / tasks', () => {...});
    this.passhrough (); // gérer les demandes non gérées
}

Vous pouvez également spécifier une urlPrefix personnalisée:

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

Cela permet une transition transparente entre Mirage et la vraie API.

Conclusion

MirageJS propose une solution rationalisée côté client pour la moquerie d'API, éliminant le besoin de processus externes ou de connaissances côté serveur. Sa facilité d'utilisation et ses fonctionnalités puissantes en font un outil précieux pour les développeurs frontaux. Reportez-vous à la documentation officielle MirageJS pour des fonctionnalités et des tutoriels plus avancés. Un exemple de travail peut être trouvé sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!