逃离双矢量箔

简介

在这个项目中，你将学习如何开发一个 RequestControl 类，该类收集航天器的发射请求，并根据航天器的结果自动安排下一批航天器的发射。这将帮助人类摆脱三体问题中“双矢箔”的影响，它将三维空间坍缩成二维平面。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何在 RequestControl 类中实现 run 函数来处理航天器的发射。
• 如何使用 render 函数在页面上呈现发射结果。

🏆 成果

完成这个项目后，你将能够：

• 使用 Promise 模拟航天器发射过程。
• 管理发射队列并控制一次可发射的航天器数量。
• 更新用户界面以显示发射结果。

Skills Graph

设置项目结构

在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

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

其中：

• index.html 是主页。
• main.js 是需要补充代码的js文件。

在 main.js 文件中：

• createRequest 方法是一个用于发起航天器发射请求的 promise。
• RequestControl 类的 addRequest 方法收集航天器的发射请求。航天器发射请求被放置在 this.requestQueue 发射队列中。
• run 方法根据发射结果自动安排下一批航天器的发射。
• render 方法用于在页面上呈现发射结果。

以 max = 2 为例，航天器发射过程如下：

点击WebIDE右下角的上线按钮来运行项目。最初它没有效果。

在 RequestControl 类中实现 run 函数

在这一步中，你将在 RequestControl 类中实现 run 函数，以便根据发射结果自动安排下一批航天器的发射。

1. 打开提供的项目中的 main.js 文件。
2. 在 RequestControl 类中找到 run 函数。
3. 在 run 函数内部，添加以下代码来处理航天器的发射：

run() {
  // 获取请求队列的长度
  let len = this.requestQueue.length;

  // 如果请求队列为空，则返回
  if (len === 0) return;

  // 获取航天器最大数量和请求队列长度中的最小值
  let min = Math.min(this.max, len);

  // 逐个发射航天器
  for (let i = 0; i < min; i++) {
    // 可发射的航天器最大数量减一
    this.max--;

    // 从队列中获取下一个请求
    let req = this.requestQueue.shift();

    // 发射航天器并处理结果
    req()
   .then((res) => {
      this.render(res);
    })
   .catch((error) => {
      this.render(error);
    })
   .finally(() => {
      // 可发射的航天器最大数量加一
      this.max++;
      // 递归调用 run 函数以发射下一批航天器
      this.run();
    });
  }
}

实现的关键点如下：

1. 获取请求队列的长度（this.requestQueue.length）。
2. 如果请求队列为空，则返回。
3. 获取航天器最大数量和请求队列长度中的最小值（Math.min(this.max, len)）。
4. 逐个发射航天器，可发射的航天器最大数量减一（this.max--）。
5. 使用 req() 返回的 Promise 的 then 和 catch 方法处理航天器发射的结果。
6. 可发射的航天器最大数量加一（this.max++）并递归调用 run 函数以发射下一批航天器。

测试项目

1. 保存 main.js 文件。
2. 在浏览器中刷新网页。
3. 观察页面上显示的发射结果。页面应显示航天器的成功发射和失败发射情况。

最终页面效果如下：

恭喜！你已经完成了 RequestControl 类的实现，以自动安排航天器的发射。该项目现在应该可以完全正常运行了。

总结

恭喜！你已经完成了这个项目。你可以在LabEx中练习更多实验来提升你的技能。