逃离二向箔

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-02

2.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-025.成语学习2023-06-026.消失的 Token2023-06-027.芝麻开门2023-06-028.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-0413.绝美宋词2023-06-0414.布局切换2023-06-0515.和手机相处的时光2023-06-0516.天气趋势2023-06-0517.阅读吧2023-06-0518.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

蓝桥杯web逃离二向箔

任务

现在地球上有n个飞船请求飞向月亮
飞船的发射舱一共只有10个，所以最多同时只能有10支飞船同时起飞
满舱的时候，就要等待其中一只飞船起飞
只要发射舱有空舱，新的飞船就要进入当中继续发射,如此循环往复直到飞船飞完

关键点

1. promise的基础使用，promise有三种状态Pending进行中，Fulfilled已完成，Rejected已拒绝
   1. 完成意味着调用.then方法
   2. 拒绝意味着调用.catch方法
   3. 无论完成还是拒绝，最后都执行.finally方法（此方法可以不使用，本次解题未使用）
2. 准备一个名为sendlist数组（名称看自己取名，若要遵循规范就使用驼峰命名），用于统计正在使用的发射舱，方便后期判断发射舱是否已满
3. async 及其 await 的使用 解决满舱等待
   1. 当sendlist数组的length到达了max(最大发射舱数量)，就要进行等待飞船的发射
   2. 要进行等待就要对方法前面使用async
   3. 对异步方法使用await，这里的异步方法是Promise.race(senlist) 注：这个异步方法下面在第四点会讲到，此处无需过多思考
4. Promise中的race方法的使用 解决等待任意一支飞船的起飞
   1. 假设此时发射舱已满，进入等待状态了
   2. 那我们如何知道正在起飞的飞船中有飞船起飞或失败了，这就需要Promise对象中的race方法了
   3. 使用语法是Promise.race(promise数组) race方法是当promise数组中的任意首个元素触发了完成或者失败均会将结果返回，这样就达到了我们等待任意一支飞船的起飞的这一条件

代码实现

1. 初试发射飞船

   // 这个题目使用的是es6的中class
   // 在这个类里的构造器中已经设置好了发射舱的数量max，请求发射的飞船队列是requestQueue
   // 执行的方法是run
   
   // 创建空的数组作为正在使用的发射舱
   let sendlist = [];
   // 尝试发射第一支飞机，无论发射成功失败，这个发射舱都应该空出来给下一个飞机使用
   sendlist.push(     
       this.requestQueue.shift()() // 从请求飞机队列中的飞机添加到发射舱中，并执行起飞操作
         .then((res) => {
           this.render(res);       // 调用写好的方法渲染到页面中
           sendlist.shift();       // 空出发射舱
         })
         .catch((err) => {
           this.render(err);       // 调用写好的方法渲染到页面中
           sendlist.shift();       // 空出发射舱
         }) 
     );
   

2. 发射全部飞船

   let sendlist = [];
   // 进行全部发射
   while (this.requestQueue.length > 0) { // 每次都会拉取请求队列中的飞机，直到 没有飞机要进行发射了
     sendlist.push(
       this.requestQueue.shift()()
         .then((res) => {
           this.render(res);
           sendlist.shift();
         })
         .catch((err) => {
           this.render(err);
           sendlist.shift();
         }) 
     );  
   }
   

3. 满舱等待

   // 发射舱已满的情况下要进行等待 其中任意一支飞机的起飞
   // 涉及等待了就得想到await，而往往await和async是同时出现的
   // 如何知道 任意一支飞机成功起飞或起飞失败 关键在promise.race 衍生一下：all是与race相反的，全部完成才会触发all
   async run(){
       // ···
       if (sendlist.length == this.max) await Promise.race(sendlist); 
       // ···
   }
   

以下是完整的代码

1. 完整code

   async run() {
       // TODO：待补充代码
       let sendlist = [];
       while (this.requestQueue.length > 0) {
         sendlist.push(
             this.requestQueue.shift()()
             .then((res) => {
                 this.render(res);
                 sendlist.shift();
             })
             .catch((err) => {
                 this.render(err);
                 sendlist.shift();
             }) 
         ); 
         if (sendlist.length == this.max) await Promise.race(sendlist); 
       }
   }
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17450860.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！