Promise

最新推荐文章于 2024-10-30 14:49:16 发布

water_v

最新推荐文章于 2024-10-30 14:49:16 发布

阅读量262

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/water_v/article/details/105510178

版权

javascript 专栏收录该内容

26 篇文章

订阅专栏

要求多个异步任务顺序执行

function liang(){
    console.log(`亮起泡...`);
    setTimeout(function(){
        console.log(`亮到达终点！`);
    },Math.random()*2*1000+1000);
}
function ran(){
    console.log(`然起泡...`);
    setTimeout(function(){
        console.log(`然到达终点！`);
    },Math.random()*2*1000+1000);
}
liang()
ran()

问题：单纯调用两个异步函数，不能顺序执行，谁先到不知道
解决：回调函数

function liang(next){
    console.log(`亮起泡...`);
    setTimeout(function(){
        console.log(`亮到达终点！`);
        next();
    },Math.random()*2*1000+1000);
}
//调用
liang(function(){ran();})

callback-hell

function ran(next){
    console.log(`然起泡...`);
    setTimeout(function(){
        console.log(`然到达终点！`);
        next();
    },Math.random()*2*1000+1000);
}
//再造两个函数
function dong(next){
    console.log(`东起泡...`);
    setTimeout(function(){
        console.log(`东到达终点！`);
        next();
    },Math.random()*2*1000+1000);
}
function tao(next){
    console.log(`涛起泡...`);
    setTimeout(function(){
        console.log(`涛到达终点！`);
        next();
    },Math.random()*2*1000+1000);
}
//调用
liang(
  function(){
      ran(function(){
          dong(function(){
             tao(function(){
                console.log(`比赛结束`);
              })
          })
      })
   }
)

上面写法回调地狱现象
解决：promise是专门解决回调地狱问题，保证多个异步任务可以顺序执行

function liang(){
   return new Promise(function(resolve){
      console.log(`亮起泡...`);
      setTimeout(function(){
        console.log(`亮到达终点！`);
        resolve();
      },Math.random()*2*1000+1000);
   })
}

function ran(){
    console.log(`然起泡...`);
    setTimeout(function(){
        console.log(`然到达终点！`);
    },Math.random()*2*1000+1000);
}
liang().then(ran);

//改写上面的回调地狱现象


function liang(){
   return new Promise(function(resolve){
      console.log(`亮起泡...`);
      setTimeout(function(){
        console.log(`亮到达终点！`);
        resolve();
      },Math.random()*2*1000+1000);
   })
}

function ran(){
  return new Promise(function(resolve){
      console.log(`然起泡...`);
      setTimeout(function(){
        console.log(`然到达终点！`);
        resolve();
      },Math.random()*2*1000+1000);
   })
}

function dong(){
  return new Promise(function(resolve){
      console.log(`东起泡...`);
      setTimeout(function(){
        console.log(`东到达终点！`);
        resolve();
      },Math.random()*2*1000+1000);
   })
}

function tao(){
  return new Promise(function(resolve){
      console.log(`涛起泡...`);
      setTimeout(function(){
        console.log(`涛到达终点！`);
        resolve();
      },Math.random()*2*1000+1000);
   })
}
liang().then(ran).then(dong).then(tao).then(()=>console.log(`比赛结束`))

前后任务传递参数
在后一项任务的函数上定义形参变量准备接resolve()传下来的实参值

function liang(){
   return new Promise(function(resolve){
      var bang=`接力棒`;
      console.log(`亮拿着${bang}起泡...`);
      setTimeout(function(){
        console.log(`亮拿着${bang}到达终点！`);
        resolve(bang);
      },Math.random()*2*1000+1000);
   })
}


function ran(b){
  return new Promise(function(resolve){
      console.log(`然接着${b}起泡...`);
      setTimeout(function(){
        console.log(`然拿着${b}到达终点！`);
        resolve(b);
      },Math.random()*2*1000+1000);
   })
}

function dong(b){
  return new Promise(function(resolve){
      console.log(`东接着${b}起泡...`);
      setTimeout(function(){
        console.log(`东拿着${b}到达终点！`);
        resolve(b);
      },Math.random()*2*1000+1000);
   })
}

function tao(b){
  return new Promise(function(resolve){
      console.log(`涛接着${b}起泡...`);
      setTimeout(function(){
        console.log(`涛拿着${b}到达终点！`);
        resolve();
      },Math.random()*2*1000+1000);
   })
}
liang().then(ran).then(dong).then(tao).then(()=>console.log(`比赛结束`))

错误处理

function liang(){
   return new Promise(function(resolve,reject){
      var bang=`接力棒`;
      console.log(`亮拿着${bang}起泡...`);
      setTimeout(function(){
        if(Math.random()<0.6){
              console.log(`亮拿着${bang}到达终点！`);
              resolve(bang);         
        }else{
             console.log(`biaji...`);
             reject(`亮摔倒了！`)
        }
      },Math.random()*2*1000+1000);
   })
}


function ran(b){
  return new Promise(function(resolve,reject){
      console.log(`然接着${b}起泡...`);
      setTimeout(function(){
        if(Math.random()<0.6){
             console.log(`然拿着${b}到达终点！`);
             resolve(b);            
        }else{
           console.log(`biaji...`);
           reject(`然摔倒了！`)
        }
      },Math.random()*2*1000+1000);
   })
}

function dong(b){
  return new Promise(function(resolve,reject){
      console.log(`东接着${b}起泡...`);
      setTimeout(function(){
	      if(Math.random()<0.6){
	           console.log(`东拿着${b}到达终点！`);
	           resolve(b);
	        }else{
	           console.log(`biaji...`);
	           reject(`东摔倒了！`)
	        }
      },Math.random()*2*1000+1000);
   })
}

function tao(b){
  return new Promise(function(resolve,reject){
      console.log(`涛接着${b}起泡...`);
      setTimeout(function(){
	      if(Math.random()<0.6){
	        console.log(`涛拿着${b}到达终点！`);
	        resolve();
	      }else{
	         console.log(`biaji...`);
		     reject(`涛摔倒了！`)
	      }
      },Math.random()*2*1000+1000);
   })
}
liang().then(ran).then(dong).then(tao).then(()=>console.log(`比赛结束`)).catch(errMsg=>{console.error(errMsg);console.log("比赛中断")});

如何等待多个任务都执行完，才结束，
如果需要等待的多个异步任务之间没有必然的先后顺，最好让多个任务先异步执行用promise.all

function liang(){
   return new Promise(function(resolve){
      console.log(`亮起泡...`);
      setTimeout(function(){
        console.log(`亮到达终点！`);
        resolve();
      },Math.random()*6000);
   })
}

function ran(){
  return new Promise(function(resolve){
      console.log(`然起泡...`);
      setTimeout(function(){
        console.log(`然到达终点！`);
        resolve();
      },Math.random()*6000);
   })
}

function dong(){
  return new Promise(function(resolve){
      console.log(`东起泡...`);
      setTimeout(function(){
        console.log(`东到达终点！`);
        resolve();
      },Math.random()*6000);
   })
}

function tao(){
  return new Promise(function(resolve){
      console.log(`涛起泡...`);
      setTimeout(function(){
        console.log(`涛到达终点！`);
        resolve();
      },Math.random()*6000);
   })
}
console.log(`比赛开始...pia!`)
Promise.all([
    liang(),
    ran(),
    dong(),
    tao()
]).then(()=>{
     console.log(`比赛结束！`)
})
//传参
function liang(){
   return new Promise(function(resolve){
      console.log(`亮起泡...`);
      setTimeout(function(){
        console.log(`亮到达终点！`);
        resolve(`亮的接力棒`);
      },Math.random()*6000);
   })
}

function ran(){
  return new Promise(function(resolve){
      console.log(`然起泡...`);
      setTimeout(function(){
        console.log(`然到达终点！`);
        resolve(`然的接力棒`);
      },Math.random()*6000);
   })
}

function dong(){
  return new Promise(function(resolve){
      console.log(`东起泡...`);
      setTimeout(function(){
        console.log(`东到达终点！`);
        resolve(`东的接力棒`);
      },Math.random()*6000);
   })
}

function tao(){
  return new Promise(function(resolve){
      console.log(`涛起泡...`);
      setTimeout(function(){
        console.log(`涛到达终点！`);
        resolve(`涛的接力棒`);
      },Math.random()*6000);
   })
}
console.log(`比赛开始...pia!`)
Promise.all([
    liang(),
    ran(),
    dong(),
    tao()
]).then((result)=>{
     console.log(`比赛结束！`);
     console.log(result);
})

ES7中promise的简写

function liang(){
   return new Promise(function(resolve){
      console.log(`亮起泡...`);
      setTimeout(function(){
        console.log(`亮到达终点！`);
        resolve();
      },Math.random()*6000);
   })
}

function ran(){
  return new Promise(function(resolve){
      console.log(`然起泡...`);
      setTimeout(function(){
        console.log(`然到达终点！`);
        resolve();
      },Math.random()*6000);
   })
}

function dong(){
  return new Promise(function(resolve){
      console.log(`东起泡...`);
      setTimeout(function(){
        console.log(`东到达终点！`);
        resolve();
      },Math.random()*6000);
   })
}

function tao(){
  return new Promise(function(resolve){
      console.log(`涛起泡...`);
      setTimeout(function(){
        console.log(`涛到达终点！`);
        resolve();
      },Math.random()*6000);
   })
}
(async function(){
   console.log(`比赛开始！`);
   await liang();
   await ran();
   await dong();
   await tao();
   console.log(`比赛结束！`);
})()
//传值
function liang(){
   return new Promise(function(resolve,reject){
      var bang=`接力棒`;
      console.log(`亮拿着${bang}起泡...`);
      setTimeout(function(){
        if(Math.random()<0.6){
              console.log(`亮拿着${bang}到达终点！`);
              resolve(bang);         
        }else{
             console.log(`biaji...`);
             reject(`亮摔倒了！`)
        }
      },Math.random()*2*1000+1000);
   })
}


function ran(b){
  return new Promise(function(resolve,reject){
      console.log(`然接着${b}起泡...`);
      setTimeout(function(){
        if(Math.random()<0.6){
             console.log(`然拿着${b}到达终点！`);
             resolve(b);            
        }else{
           console.log(`biaji...`);
           reject(`然摔倒了！`)
        }
      },Math.random()*2*1000+1000);
   })
}

function dong(b){
  return new Promise(function(resolve,reject){
      console.log(`东接着${b}起泡...`);
      setTimeout(function(){
	      if(Math.random()<0.6){
	           console.log(`东拿着${b}到达终点！`);
	           resolve(b);
	        }else{
	           console.log(`biaji...`);
	           reject(`东摔倒了！`)
	        }
      },Math.random()*2*1000+1000);
   })
}

function tao(b){
  return new Promise(function(resolve,reject){
      console.log(`涛接着${b}起泡...`);
      setTimeout(function(){
	      if(Math.random()<0.6){
	        console.log(`涛拿着${b}到达终点！`);
	        resolve();
	      }else{
	         console.log(`biaji...`);
		     reject(`涛摔倒了！`)
	      }
      },Math.random()*2*1000+1000);
   })
}
(async function(){
    try{
       console.log(`比赛开始！`)
       var b=await liang();
       b=await ran(b);
       b=await dong(b);
       await  tao(b);
       console.log(`比赛结束！`);
    }catch(errMsg){
         console.log(errMsg);
         console.log("比赛中断！");
    }
})()

promise.all ES7简写

function liang(){
   return new Promise(function(resolve){
      console.log(`亮起泡...`);
      setTimeout(function(){
        console.log(`亮到达终点！`);
        resolve(`亮的接力棒`);
      },Math.random()*6000);
   })
}

function ran(){
  return new Promise(function(resolve){
      console.log(`然起泡...`);
      setTimeout(function(){
        console.log(`然到达终点！`);
        resolve(`然的接力棒`);
      },Math.random()*6000);
   })
}

function dong(){
  return new Promise(function(resolve){
      console.log(`东起泡...`);
      setTimeout(function(){
        console.log(`东到达终点！`);
        resolve(`东的接力棒`);
      },Math.random()*6000);
   })
}

function tao(){
  return new Promise(function(resolve){
      console.log(`涛起泡...`);
      setTimeout(function(){
        console.log(`涛到达终点！`);
        resolve(`涛的接力棒`);
      },Math.random()*6000);
   })
}
(async function(){
         console.log(`比赛开始...pia!`)
		var result=await Promise.all([
		    liang(),
		    ran(),
		    dong(),
		    tao()
		])
		 console.log(`比赛结束！`);
		 console.log(result);
})()