es6(13)--Promise

  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 }