promise用于异步调用
//基本用法
let ajax=function(){ console.log("执行"); return new Promise(function(resolve,reject){ setTimeout(function(){ resolve() },1000) }) } ajax().then(function(){ console.log("promise","timeout"); })
//连续调用
let ajax=function(){ console.log("执行1"); return new Promise(function(resolve,reject){ setTimeout(function(){ resolve() },1000) }) } ajax() .then(function(){ return new Promise(function(resolve,reject){ setTimeout(function(){ resolve() },2000) }) .then(function(){ console.log("timeout3") }) })
//错误捕获
let ajax=function(num){ console.log("执行乐乐乐"); return new Promise(function(resolve,reject){ if(num>5){ resolve() }else{ throw Error("出错了"); } }) } ajax(6).then(function(){ console.log("执行第二步"); }).catch(function(err){ console.log("catch",err); }) ajax(1).then(function(){ console.log("执行第二步"); }).catch(function(err){ console.log("catch",err); })
实例
//所有图片加载完再加载到页面 function loadImg(src){ return new Promise((resolve,reject)=>{ let img=document.createElement("img"); img.src=src; img.onload=function(){ resolve(img); } img.onerror=function(err){ reject(err); } }) } function shopImgs(imgs){ imgs.forEach(function(img){ document.body.appendChild(img); }) } Promise.all([ loadImg("http://img.tgljweb.com/1720171108170301_tango_img"), loadImg("http://img.tgljweb.com/1720171112111533_tango_img"), loadImg("http://img.tgljweb.com/1720171104093842_tango_img"), ]).then(shopImgs)
//当有一个图片加载完就显示在页面,即哪一张先加载出来,就显示哪一张 function loadImg(src){ return new Promise((resolve,reject)=>{ let img=document.createElement("img"); img.src=src; img.onload=function(){ resolve(img); } img.onerror=function(err){ reject(err); } }) } function shopImgs(img){ let p=document.createElement("p"); p.appendChild(img); document.body.appendChild(p); } Promise.race([ loadImg("http://img.tgljweb.com/1720171108170301_tango_img"), loadImg("http://img.tgljweb.com/1720171112111533_tango_img"), loadImg("http://img.tgljweb.com/1720171104093842_tango_img") ]).then(shopImgs)