1 //Promise 2 3 { 4 //原始方法 5 let ajax=function(callback){ 6 console.log('执行') 7 setTimeout(function(){ 8 callback&&callback.call() 9 },1000) 10 } 11 ajax(function(){ 12 console.log('timeout1') 13 }) 14 } 15 { 16 //使用Promise 17 let ajax=function(){ 18 console.log('执行2') 19 //new Promise(function(resolve,reject){}) 20 //resolve:要执行下一步的操作 21 //reject:要中断当前的操作 22 return new Promise(function(resolve,reject){ 23 setTimeout(function(){ 24 resolve(); 25 },1000) 26 }) 27 } 28 ajax().then(function(){ 29 console.log('Promise','timeout2') 30 }) 31 } 32 { 33 //使用Promise 34 let ajax=function(){ 35 console.log('执行3') 36 return new Promise(function(resolve,reject){ 37 setTimeout(function(){ 38 resolve(); 39 },1000) 40 }) 41 }; 42 ajax() 43 .then(function(){ 44 return new Promise(function(resolve,reject){ 45 setTimeout(function(){ 46 resolve(); 47 },2000) 48 }) 49 }). 50 then(function(){ 51 console.log('timeout3') 52 }) 53 } 54 { 55 let ajax=function(num){ 56 console.log('执行4'); 57 return new Promise(function(resolve,reject){ 58 if(num>5){ 59 resolve(); 60 }else{ 61 throw new Error('出错了') 62 } 63 }) 64 } 65 ajax(3).then(function(){ 66 console.log('log',6); 67 }).catch(function(err){ 68 console.log(err) 69 }) 70 } 71 { 72 //所有图片加载完了再添加到页面 73 function loadImg(src){ 74 return new Promise((resolve,reject)=>{ 75 let img=document.createElement('img'); 76 img.src=src; 77 img.onload=function(){ 78 resolve(img); 79 } 80 img.onerror=function(err){ 81 reject(err); 82 } 83 }) 84 } 85 function showImgs(imgs){ 86 imgs.forEach(function(img){ 87 document.body.appendChild(img); 88 }) 89 } 90 //Promise.all把多个promise实例变成一个实例 91 Promise.all([ 92 loadImg('..'), 93 loadImg('..'), 94 loadImg('..'), 95 ]).then(showImgs) 96 } 97 { 98 //有一个图片加载完就添加到页面上 99 function loadImg(src){ 100 return new Promise((resolve,reject)=>{ 101 let img=document.createElement('img'); 102 img.src=src; 103 img.onload=function(){ 104 resolve(img); 105 } 106 img.onerror=function(err){ 107 reject(err); 108 } 109 }) 110 } 111 function showImas(img){ 112 let p=document.createElement('p'); 113 p.appendChild(img); 114 document.body.appendChild(p); 115 } 116 //有一个实例发生改变就先加载 117 Promise.rase([ 118 loadImg('..'), 119 loadImg('..'), 120 loadImg('..'), 121 ]).then(showImgs) 122 }