Comprendre les Mock APIs en JavaScript : Un guide pour débutants

Hé les développeurs ! Vous êtes-vous déjà retrouvé en train de créer une application web incroyable, pour finalement vous heurter à un mur parce que vous attendez qu'une API soit prête ? Frustrant, n'est-ce pas ? Eh bien, c'est là que les mock APIs viennent à la rescousse, surtout lorsque vous travaillez avec JavaScript. Et devinez quoi ? Des outils comme Apidog rendent ce processus encore plus transparent.

💡

Téléchargez Apidog gratuitement pour créer, gérer et tester sans effort vos mock APIs, et maintenir votre flux de développement fluide et ininterrompu.

button

Alors, plongeons dans le monde des mock APIs en JavaScript et explorons comment elles peuvent booster votre processus de développement !

Qu'est-ce qu'une Mock API ?

Une mock API simule le comportement d'une véritable API en fournissant des réponses prédéfinies à des requêtes spécifiques. C'est comme un remplaçant de l'API réelle, permettant aux développeurs de continuer à construire et à tester leurs applications sans avoir à attendre que les services backend soient terminés.

Pourquoi utiliser des Mock APIs ?

Les mock APIs sont incroyablement utiles pour plusieurs raisons :

Accélérer le développement : Plus besoin d'attendre les développeurs backend. Commencez à intégrer les API dès que vous commencez à coder votre frontend.
Tests : Elles aident à tester minutieusement votre application en fournissant des réponses cohérentes.
Isolation : Vous pouvez isoler le développement de votre frontend du backend, réduisant ainsi les dépendances.
Collaboration : Les équipes peuvent travailler en parallèle sans se bloquer mutuellement.

Démarrer avec les Mock APIs en JavaScript

Maintenant, passons à la pratique. Voici comment vous pouvez configurer une mock API en JavaScript.

Étape 1 : Configuration de votre projet

Tout d'abord, créez un nouveau projet JavaScript. Si vous utilisez Node.js, vous pouvez commencer par :

mkdir mock-api-demo
cd mock-api-demo
npm init -y

Installez Express.js, un framework web populaire pour Node.js :

npm install express

Étape 2 : Création de votre Mock API

Créez un fichier nommé server.js dans le répertoire de votre projet. Ce fichier contiendra le code de votre mock API.

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.get('/api/users', (req, res) => {
    res.json([
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
    ]);
});

app.listen(port, () => {
    console.log(`Mock API server running at http://localhost:${port}`);
});

Exécutez le serveur avec :

node server.js

Vous avez maintenant une mock API en cours d'exécution à http://localhost:3000/api/users qui renvoie une liste d'utilisateurs.

Présentation d'Apidog

Bien qu'écrire vos propres mock APIs soit excellent, des outils comme Apidog rendent cela encore plus facile et plus puissant. Apidog est un outil complet qui vous aide à créer, gérer et tester des API sans effort.

button

Pourquoi choisir Apidog ?

Interface conviviale : Pas besoin d'écrire du code à partir de zéro. Apidog fournit une interface visuelle pour définir vos API.
Collaboration : Partagez facilement vos définitions d'API avec votre équipe.
Tests : Outils intégrés pour tester vos API directement depuis l'interface.
Documentation : Générez automatiquement la documentation de l'API.

Étape 1. Créer un nouveau projet

Apidog utilise des projets pour gérer les API. Vous pouvez créer plusieurs API sous un même projet. Chaque API doit appartenir à un projet. Pour créer un nouveau projet, cliquez sur le bouton "New Project" (Nouveau projet) sur le côté droit de la page d'accueil de l'application Apidog.

Étape 2. Créer une nouvelle API

Pour démontrer la création d'une API pour les détails de l'utilisateur, suivez ces étapes :

Méthode de requête : GET.
URL : api/user/{id}, où {id} est le paramètre représentant l'ID de l'utilisateur.
Type de réponse : json.
Contenu de la réponse :

{
id: number, // user id
name: string, // username
gender: 1 | 2, // gender: 1 for male, 2 for female
phone: string, // phone number
avatar: string, // avatar image address
}

Pour créer une nouvelle interface, accédez à la page d'accueil du projet précédemment créé et cliquez sur le bouton "+" sur le côté gauche.

Remplissez les informations d'interface correspondantes et enregistrez-les.

Avec cela, l'interface des détails de l'utilisateur a été créée. Pendant ce temps, Apidog a automatiquement généré une simulation pour nous en fonction du format et du type des champs de réponse. Cliquez sur le bouton "Request" (Requête) sous Mock pour afficher la réponse simulée.

Jetons un coup d'œil à la réponse simulée. Cliquez sur le bouton "Request" (Requête), puis cliquez sur "Send" (Envoyer) sur la page qui s'ouvre.

Étape 3. Définir les règles de correspondance Mock

Avez-vous remarqué quelque chose de magique ? Apidog a défini le champ "name" sur le type string, mais il renvoie des noms ; a défini le champ "phone" sur le type string, mais il renvoie des numéros de téléphone ; a défini le champ "avatar" sur le type string, mais il renvoie des adresses d'images.

La raison est qu'Apidog prend en charge la définition de règles de correspondance pour Mock. Apidog dispose de règles intégrées, et les utilisateurs peuvent également personnaliser leurs propres règles. Ces règles se trouvent dans Project Settings > Feature Settings > Mock Settings (Paramètres du projet > Paramètres des fonctionnalités > Paramètres de simulation).

Vous pouvez également définir des règles Mock dédiées pour chaque champ. Cliquez sur "Mock" à côté du champ :

Les règles de correspondance Mock d'Apidog sont les suivantes :

Lorsqu'un champ répond à une règle de correspondance, la réponse renverra une valeur aléatoire qui satisfait la règle Mock.
Si un champ ne répond à aucune règle de correspondance, la réponse renverra une valeur aléatoire qui correspond au type de données du champ.

Il existe trois types de règles de correspondance :

Jokers : * correspond à zéro ou plusieurs caractères, et ? correspond à n'importe quel caractère unique. Par exemple, *name peut correspondre à user name, name, etc.
Expressions régulières.
Correspondance exacte.

Les règles Mock sont entièrement compatibles avec Mock.js et ont étendu une syntaxe que Mock.js n'a pas (comme les numéros de téléphone nationaux "@phone"). Les règles Mock couramment utilisées incluent :

@integer : entier. @integer(min, max).
@string : chaîne de caractères. @string(length) : spécifie la longueur de la chaîne.
@regexp(regexp) : expression régulière.
@url : URL.

Pendant le développement, nous pouvons rencontrer des scénarios Mock flexibles et complexes, tels que le renvoi de contenu personnalisé en fonction de différents paramètres de requête. Par exemple, renvoyer des informations utilisateur normales lorsque l'ID est 1, et signaler une erreur lorsque l'ID est 2. Apidog prend également en charge ces scénarios, et les personnes intéressées peuvent consulter le document Advanced Mock.

Techniques avancées de Mock API

Réponses dynamiques

Parfois, les réponses statiques ne suffisent pas. Vous pourriez avoir besoin que votre mock API renvoie des données différentes en fonction de la requête. Améliorons notre exemple précédent.

app.get('/api/users/:id', (req, res) => {
    const users = [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
    ];

    const user = users.find(u => u.id == req.params.id);
    if (user) {
        res.json(user);
    } else {
        res.status(404).send('User not found');
    }
});

Maintenant, vous pouvez demander un utilisateur spécifique par son ID, et la mock API renverra l'utilisateur correspondant ou une erreur 404 si l'utilisateur n'est pas trouvé.

Retarder les réponses

Pour simuler la latence du réseau, vous pouvez introduire des délais dans vos réponses. Cela peut être utile pour tester comment votre application gère les réseaux lents.

app.get('/api/users', (req, res) => {
    setTimeout(() => {
        res.json([
            { id: 1, name: 'John Doe' },
            { id: 2, name: 'Jane Smith' }
        ]);
    }, 2000); // 2 seconds delay
});

Comment générer efficacement des données simulées conviviales avec Apidog ?

Apidog peut générer des règles simulées basées sur la structure des données et le type de données dans la définition de l'API.
Apidog dispose d'une simulation intelligente intégrée, qui génère des règles simulées basées sur le nom du champ et le type de données du champ. Par exemple, si un champ de chaîne contient "image", "time", "city", etc... dans son nom, Apidog générera une url, une chaîne ou un nom en fonction de son champ.
Basé sur les règles simulées intégrées, Apidog peut identifier automatiquement les champs, tels que l'image, l'avatar, le nom d'utilisateur, le numéro de téléphone portable, l'URL, la date, l'heure, l'horodatage, l'e-mail, la province, la ville, l'adresse et l'IP, pour générer des données factices conviviales.
En plus des règles simulées intégrées, les utilisateurs peuvent également personnaliser les règles pour répondre à divers besoins de personnalisation. Il prend en charge la correspondance de champs de chaîne à l'aide d'expressions régulières ou de jokers.

Voici un exemple de données simulées générées par Apidog sans aucune configuration :

Meilleures pratiques pour l'utilisation des Mock APIs

Restez simple : Commencez par des réponses simples et statiques et ajoutez progressivement de la complexité si nécessaire.
Documentez vos Mock APIs : Assurez-vous que votre équipe connaît les points de terminaison disponibles et leurs réponses.
Mises à jour régulières : Gardez vos mock APIs à jour au fur et à mesure que les véritables API évoluent.
Testez minutieusement : Utilisez les mock APIs pour tester différents scénarios, y compris les cas limites.

Cas d'utilisation concrets

Développement frontend

Lors de la création d'une application frontend, vous pouvez utiliser des mock APIs pour commencer à travailler sur les fonctionnalités immédiatement, sans attendre que le backend soit prêt. Cette approche permet un développement parallèle et accélère le processus global.

Tests automatisés

Les mock APIs sont essentielles pour les tests automatisés. Elles fournissent des réponses cohérentes, ce qui facilite l'écriture de tests fiables. Des outils comme Jest et Cypress peuvent s'intégrer aux mock APIs pour tester divers composants et flux.

Prototypage

Lors de la création de prototypes ou de preuves de concept, les mock APIs vous permettent de configurer rapidement les interactions backend nécessaires sans investir de temps dans la création des services backend réels.

Conclusion

Les mock APIs sont un véritable atout pour les développeurs, offrant un moyen d'accélérer le développement, d'améliorer les tests et de faciliter une meilleure collaboration. Avec des outils comme Apidog, la création et la gestion des mock APIs deviennent un jeu d'enfant, vous permettant de vous concentrer sur la création d'applications étonnantes.

Alors, la prochaine fois que vous vous retrouverez à attendre une API, rappelez-vous que les mock APIs sont vos meilleurs amis. Et n'oubliez pas de consulter Apidog pour une expérience sans tracas !

Appel à l'actionTéléchargez Apidog gratuitement