Échapper au Vecteur Dual Foil

Introduction

Dans ce projet, vous allez apprendre à développer une classe RequestControl qui collecte les demandes de lancement pour les vaisseaux spatiaux et organise automatiquement le lancement du prochain lot de vaisseaux spatiaux en fonction des résultats des vaisseaux spatiaux. Cela aidera les humains à éviter l'impact du "Dual Vector Foil" du problème des trois corps, qui réduit l'espace tridimensionnel à un plan bidimensionnel.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment implémenter la fonction run dans la classe RequestControl pour gérer le lancement des vaisseaux spatiaux.
• Comment afficher les résultats du lancement sur la page à l'aide de la fonction render.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser des promesses pour simuler le processus de lancement des vaisseaux spatiaux.
• Gérer la file d'attente de lancement et contrôler le nombre de vaisseaux spatiaux qui peuvent être lancés à la fois.
• Mettre à jour l'interface utilisateur pour afficher les résultats du lancement.

Skills Graph

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── index.html
└── main.js

Dans lequel :

• index.html est la page principale.
• main.js est le fichier js dans lequel le code doit être complété.

Dans le fichier main.js :

• La méthode createRequest est une promesse pour lancer une demande de vaisseau spatial.
• La méthode addRequest de la classe RequestControl collecte les demandes de lancement pour les vaisseaux spatiaux. La demande de lancement du vaisseau spatial est placée dans la file d'attente de lancement this.requestQueue.
• La méthode run organise automatiquement le lancement du prochain lot de vaisseaux spatiaux en fonction des résultats de lancement.
• La méthode render est utilisée pour afficher les résultats de lancement sur la page.

Prendons max = 2 comme exemple, le processus de lancement des vaisseaux spatiaux est le suivant :

Cliquez sur le bouton Démarrer dans le coin inférieur droit de WebIDE pour exécuter le projet. Cela n'a aucun effet au départ.

Implémenter la fonction run dans la classe RequestControl

Dans cette étape, vous allez implémenter la fonction run dans la classe RequestControl pour organiser automatiquement le lancement du prochain lot de vaisseaux spatiaux en fonction des résultats de lancement.

1. Ouvrez le fichier main.js dans le projet fourni.
2. Localisez la fonction run dans la classe RequestControl.
3. Dans la fonction run, ajoutez le code suivant pour gérer le lancement des vaisseaux spatiaux :

run() {
  // Obtenez la longueur de la file d'attente de requêtes
  let len = this.requestQueue.length;

  // Si la file d'attente de requêtes est vide, retournez
  if (len === 0) return;

  // Obtenez le minimum entre le nombre maximal de vaisseaux spatiaux et la longueur de la file d'attente de requêtes
  let min = Math.min(this.max, len);

  // Lancez les vaisseaux spatiaux un par un
  for (let i = 0; i < min; i++) {
    // Décrémentez le nombre maximal de vaisseaux spatiaux qui peuvent être lancés
    this.max--;

    // Obtenez la prochaine requête de la file d'attente
    let req = this.requestQueue.shift();

    // Lancez le vaisseau spatial et gérez le résultat
    req()
   .then((res) => {
      this.render(res);
    })
   .catch((error) => {
      this.render(error);
    })
   .finally(() => {
      // Incrémentez le nombre maximal de vaisseaux spatiaux qui peuvent être lancés
      this.max++;
      // Appelez récursivement la fonction run pour lancer le prochain lot de vaisseaux spatiaux
      this.run();
    });
  }
}

Les points clés de l'implémentation sont :

1. Obtenir la longueur de la file d'attente de requêtes (this.requestQueue.length).
2. Si la file d'attente de requêtes est vide, retourner.
3. Obtenir le minimum entre le nombre maximal de vaisseaux spatiaux et la longueur de la file d'attente de requêtes (Math.min(this.max, len)).
4. Lancer les vaisseaux spatiaux un par un, en décrémentant le nombre maximal de vaisseaux spatiaux qui peuvent être lancés (this.max--).
5. Gérer le résultat du lancement du vaisseau spatial à l'aide des méthodes then et catch de la promesse renvoyée par req().
6. Incrémenter le nombre maximal de vaisseaux spatiaux qui peuvent être lancés (this.max++) et appeler récursivement la fonction run pour lancer le prochain lot de vaisseaux spatiaux.

Tester le projet

1. Enregistrez le fichier main.js.
2. Raffraîchissez la page web dans votre navigateur.
3. Observez les résultats de lancement affichés sur la page. La page devrait montrer les lancers réussis et échoués des vaisseaux spatiaux.

L'effet final de la page est le suivant :

Félicitations ! Vous avez terminé l'implémentation de la classe RequestControl pour organiser automatiquement le lancement des vaisseaux spatiaux. Le projet devrait maintenant être entièrement fonctionnel.

Sommaire

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.