笔记

万物寻其根,通其堵,便能解其困。
  博客园  :: 新随笔  :: 管理

关于new Promise()并行多个异步处理

Posted on 2024-07-18 15:51  草妖  阅读(6)  评论(0)    收藏  举报

单步

this.showAreaInfos=["开始执行runningDemo..."];
                    var _this=this;
                    new Promise((resolve, reject)=>{
                        var getRandomNum=Math.random();
                        _this.showAreaInfos.push("获取到getRandomNum为:"+getRandomNum);
                        if(getRandomNum<0.5){
                            reject("reject表示返回一个错误信息。");
                        }else{
                            resolve("resolve表示返回一个成功信息。");
                        }
                    }).then(res=>{
                        _this.showAreaInfos.push("按步骤执行的第二步:"+res);
                        // 第二步这里没用使用resolve()或return,所以第三步将没用参数/上一步的返回结果,第三步建议是:then(()=>{})而不是then(res=>{})
                        // 注:这里有个特别需要注意的就是new Promise()必须要有reject()/resolve()将其pending待定状态结束否则将一直处于挂起状态,但是.then()则不需要
                        window.setTimeout(function (){
                            _this.showAreaInfos.push("这里模拟不需要结束pending待定状态的输出时间,即then(....)不会等待window.setTimeout(...)执行完毕再进行下一步。");
                        },2000);
                    }).then(()=>{
                        // 如果这里使用的是then(res=>{})接收,那么res为undefined
                        _this.showAreaInfos.push("按步骤执行的第三步。");
                    }).catch(err=>{
                        _this.showAreaInfos.push("接收reject执行的错误信息:"+err);
                    }).finally(function (){
                        _this.showAreaInfos.push("结束执行单个Promise...");
                    });
                    this.showAreaInfos.push("尾部runningDemo...");

输出:

执行结果如下:
开始执行runningDemo...
获取到getRandomNum为:0.5518627313787272
尾部runningDemo...
按步骤执行的第二步:resolve表示返回一个成功信息。
按步骤执行的第三步。
结束执行单个Promise...
这里模拟不需要结束pending待定状态的输出时间,即then(....)不会等待window.setTimeout(...)执行完毕再进行下一步。
执行结果如下:
开始执行runningDemo...
获取到getRandomNum为:0.0007349595750620885
尾部runningDemo...
接收reject执行的错误信息:reject表示返回一个错误信息。
结束执行单个Promise...

多步并行

this.showAreaInfos=["开始执行单个Promise.all()..."];
                    var _this=this;
                    const tempPromise1=new Promise((resolve)=>{
                        window.setTimeout(function (){
                            _this.showAreaInfos.push("tempPromise1正在执行...");
                            resolve("tempPromise1执行完毕");
                        },1000);
                    });
                    const tempPromise2=new Promise((resolve)=>{
                        window.setTimeout(function (){
                            _this.showAreaInfos.push("tempPromise2正在执行...");
                            resolve("tempPromise2执行完毕");
                        },200);
                    });
                    // 并发执行
                    Promise.all([tempPromise1,tempPromise2]).then(res=>{
                        _this.showAreaInfos.push("上述两个线程都已经执行完毕:("+res+")。");
                    }).catch(err=>{
                        _this.showAreaInfos.push("错误信息:"+err);
                    }).finally(function (){
                        _this.showAreaInfos.push("结束执行Promise.all()...");
                    });
                    this.showAreaInfos.push("尾部Promise.all()...");

输出:

执行结果如下:
开始执行单个Promise.all()...
尾部Promise.all()...
tempPromise2正在执行...
tempPromise1正在执行...
上述两个线程都已经执行完毕:tempPromise1执行完毕,tempPromise2执行完毕
结束执行Promise.all()...