单步:
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()...