Lors du développement d'interfaces dynamiques, il est fréquent de devoir enchaîner plusieurs appels asynchrones (AJAX) dépendant les uns des autres. En JavaScript, si vous tentez d'exécuter une méthode qui traite des données avant que celles-ci ne soient récupérées du serveur, vous rencontrerez des erreurs d'exécution ou des données manquantes. Pour garantir que les fonctions s'exécutent dans l'ordre souhaité, plusieurs approches sont possibles.

Approche par fonctions de rappel (Callbacks)

La méthode la plus classique consiste à passer une fonction en argument qui sera déclenchée une fois que la requête serveur aura reçu une réponse positive. Cette structure permet d'imbriquer les appels pour forcer la synchronisation.

methods: {
  onCityUpdate() {
    this.resetMapOverlay(); // Nettoyage de l'interface
    
    // Premier appel : récupération des lignes
    this.loadLines(this.currentCityId, () => {
      // Second appel : récupération de tous les points, lancé après le succès du premier
      this.loadPoints(this.currentCityId, () => {
        // Traitement final une fois que toutes les données sont disponibles
        this.syncInterface();
      });
    });
  },

  loadLines(id, onSuccess) {
    $.ajax({
      url: 'http://api.example.com/v1/network/lines',
      method: 'GET',
      data: { city_id: id },
      success: (data) => {
        this.networkLines = data;
        this.applyLayerStyling();
        if (onSuccess) onSuccess();
      },
      error: (err) => console.error('Échec du chargement des lignes', err)
    });
  },

  loadPoints(id, onSuccess) {
    $.ajax({
      url: 'http://api.example.com/v1/network/all-points',
      method: 'GET',
      data: { city_id: id },
      success: (data) => {
        this.stationRegistry = data;
        if (onSuccess) onSuccess();
      },
      error: (err) => console.error('Échec du chargement des points', err)
    });
  }
}

Approche par Promesses (Promises)

Pour éviter l'imbriquement excessif (communément appelé "callback hell"), l'utilisation des objets Promise offre une syntaxe plus linéaire et lisible grâce au chaînage par la méthode .then().

methods: {
  onCityUpdate() {
    this.resetMapOverlay();

    this.loadLines(this.currentCityId)
      .then(() => this.loadPoints(this.currentCityId))
      .then(() => {
        this.syncInterface();
      })
      .catch((error) => {
        console.error('Erreur dans le flux de données :', error);
      });
  },

  loadLines(id) {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: 'http://api.example.com/v1/network/lines',
        method: 'GET',
        data: { city_id: id },
        success: (res) => {
          this.networkLines = res;
          this.applyLayerStyling();
          resolve(res);
        },
        error: (err) => reject(err)
      });
    });
  },

  loadPoints(id) {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: 'http://api.example.com/v1/network/all-points',
        method: 'GET',
        data: { city_id: id },
        success: (res) => {
          this.stationRegistry = res;
          resolve(res);
        },
        error: (err) => reject(err)
      });
    });
  }
}

Modernisation avec Async/Await

La syntaxe async/await permet d'écrire du code asynchrone qui ressemble sytnaxiquement à du code synchrone, ce qui facilite grandement la maintenance et la gestion des erreurs avec des blocs try...catch.

async onCityUpdate() {
  try {
    this.resetMapOverlay();
    
    // Attente séquentielle des résultats
    await this.loadLines(this.currentCityId);
    await this.loadPoints(this.currentCityId);
    
    // Exécution finale
    this.syncInterface();
  } catch (err) {
    console.error('Interruption du processus :', err);
  }
}

Le choix entre ces méthodes dépend de la complexité de votre application. Les promesses et la syntaxe async/await sont recommandées pour les architectures modernes car elles permettent une meilleure gestion de la propagation des erreurs sur plusieurs niveaux de requêtes.