Escapar de la Lámina Vectorial Dual

Introducción

En este proyecto, aprenderás a desarrollar una clase RequestControl que recopile solicitudes de lanzamiento de naves espaciales y organice automáticamente el lanzamiento del siguiente lote de naves espaciales en función de los resultados de las naves espaciales. Esto ayudará a los humanos a escapar del impacto del "Dual Vector Foil" del problema de los tres cuerpos, que colapsa el espacio tridimensional en un plano bidimensional.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo implementar la función run en la clase RequestControl para manejar el lanzamiento de naves espaciales.
• Cómo renderizar los resultados de lanzamiento en la página utilizando la función render.

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar promesas para simular el proceso de lanzamiento de naves espaciales.
• Administrar la cola de lanzamiento y controlar el número de naves espaciales que se pueden lanzar a la vez.
• Actualizar la interfaz de usuario para mostrar los resultados de lanzamiento.

Configura la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

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

Entre ellos:

• index.html es la página principal.
• main.js es el archivo js donde se deben agregar el código.

En el archivo main.js:

• El método createRequest es una promesa para lanzar una solicitud de nave espacial.
• El método addRequest de la clase RequestControl recopila solicitudes de lanzamiento de naves espaciales. La solicitud de lanzamiento de la nave espacial se coloca en la cola de lanzamiento this.requestQueue.
• El método run organiza automáticamente el lanzamiento del siguiente lote de naves espaciales en función de los resultados de lanzamiento.
• El método render se utiliza para renderizar los resultados de lanzamiento en la página.

Tomando max = 2 como ejemplo, el proceso de lanzamiento de naves espaciales es el siguiente:

Haz clic en el botón Ir en vivo en la esquina inferior derecha de WebIDE, para ejecutar el proyecto. No tiene ningún efecto inicialmente.

Implementa la función run en la clase RequestControl

En este paso, implementarás la función run en la clase RequestControl para organizar automáticamente el lanzamiento del siguiente lote de naves espaciales en función de los resultados de lanzamiento.

1. Abre el archivo main.js en el proyecto proporcionado.
2. Localiza la función run en la clase RequestControl.
3. Dentro de la función run, agrega el siguiente código para manejar el lanzamiento de la nave espacial:

run() {
  // Obtiene la longitud de la cola de solicitudes
  let len = this.requestQueue.length;

  // Si la cola de solicitudes está vacía, devuelve
  if (len === 0) return;

  // Obtiene el mínimo entre el número máximo de naves espaciales y la longitud de la cola de solicitudes
  let min = Math.min(this.max, len);

  // Lanza las naves espaciales una por una
  for (let i = 0; i < min; i++) {
    // Decrementa el número máximo de naves espaciales que se pueden lanzar
    this.max--;

    // Obtiene la siguiente solicitud de la cola
    let req = this.requestQueue.shift();

    // Lanza la nave espacial y maneja el resultado
    req()
   .then((res) => {
      this.render(res);
    })
   .catch((error) => {
      this.render(error);
    })
   .finally(() => {
      // Incrementa el número máximo de naves espaciales que se pueden lanzar
      this.max++;
      // Llama recursivamente a la función run para lanzar el siguiente lote de naves espaciales
      this.run();
    });
  }
}

Los puntos clave de la implementación son:

1. Obtener la longitud de la cola de solicitudes (this.requestQueue.length).
2. Si la cola de solicitudes está vacía, devolver.
3. Obtener el mínimo entre el número máximo de naves espaciales y la longitud de la cola de solicitudes (Math.min(this.max, len)).
4. Lanzar las naves espaciales una por una, decrementando el número máximo de naves espaciales que se pueden lanzar (this.max--).
5. Manejar el resultado del lanzamiento de la nave espacial utilizando los métodos then y catch de la promesa devuelta por req().
6. Incrementar el número máximo de naves espaciales que se pueden lanzar (this.max++) y llamar recursivamente a la función run para lanzar el siguiente lote de naves espaciales.

Prueba el proyecto

1. Guarda el archivo main.js.
2. Refresca la página web en tu navegador.
3. Observa los resultados de lanzamiento mostrados en la página. La página debe mostrar los lanzamientos exitosos y fallidos de las naves espaciales.

El efecto final de la página es el siguiente:

¡Felicidades! Has completado la implementación de la clase RequestControl para organizar automáticamente el lanzamiento de naves espaciales. El proyecto ahora debería estar completamente funcional.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.