Promise用法1

1、直接使用

a. new方式

var promise = new Promise(function(resolve){
    resolve(42);
 })
 promise.then(function(value){
    console.log(value);
 }).catch(function(error){
    console.error(error);
 })

b. 简写方式

Promise.resolve(42).then(function(value){
   console.log(value);
})

2、最常用的使用方法

 function test(){
 
    return new Promise(function(resolve,reject){
         
           try{
              
             console.log('test')
             resolve(1)

           }catch(e){

             reject(e)

           }
 
    })
 
 }

 // 第一种写法（推荐）
 test().then(function(val){
    console.log(val);
 }).catch(function(e){
    console.error(e);
 })

 // 第二种写法

 test().then(function(val){
    console.log(val);
 },function(e){
    console.error(e)
 })

3、多个Promise对象执行完毕

function test(){

    return new Promise(function(resolve,reject){
        
        try{

           resolve(1);
       
        }catch(e){
       
           reject(e)
 
        }

   })

}


var promiseArray = [];

for(var i = 0;i<10;i++){

   promiseArray.push(test());
 
}

// 第一种写法 推荐
Promise.all(promiseArray).then(function(val){
   console.log(val); 
}).catch(function(e){
   console.error(e);
})

// 第二种写法

Promise.all(promiseArray).then(function(val){
    
      console.log(val);

},function(e){

      console.error(e);   

})

4、一个callback hell 改成Promise的例子

  var url1 = "http://pic.to8to.com/attch/day_160218/20160218_d968438a2434b62ba59dH7q5KEzTS6OH.png";
  var url2 = "http://pic.to8to.com/attch/day_160218/20160218_6410eaeeba9bc1b3e944xD5gKKhPEuEv.png";
  var url3 = "http://www.popoho.com/d/file/wmmm/20160221/16_132419_8.jpg";

  function loadImg(url,cb){

     var image = new Image();

     image.onload = function(){
         cb && cb();
     }   

     image.src = url;

  }

  // 调用

  loadImg(url1,function(){
      loadImg(url2,function(){
        loadImg(url3,function(){
            alert('all done...');
        })    
     })
  })

 
 // Promise化之后

 function loadImg(url){

    return new Promise(function(resolve,reject){

         try{

            var image = new Image();

            image.onload = function(){
                resolve(url);
            }   

            image.src = url;

         }catch(e){

           reject(e);

         }    


    })

 }


// 第一种调用方式
loadImg(url1).then(loadImg(url2)).then(loadImg(url3)).then(function(){
        console.log('all done...');
}).catch(function(e){
        console.error(e);
});


// 第二种调用方式
var promiseArray = [
   loadImg(url1),
   loadImg(url2),
   loadImg(url3)
]

Promise.all(promiseArray).then(function(url){
  
   console.log(url);
   console.log('all done');

}).catch(function(e){
 
   console.error(e);

})