ECMAScript6--15.Promise用法

1.Promise（解决异步操作问题的）

• 什么是异步
  比如：函数a，执行一个步骤，a执行完要执行b；有一个顺序问题；
  在程序上设置a执行完执行b，一种通过回调方式，一种通过事件触发方式；
• Promise的作用
• Promise的基本用法

2.模拟ajax的过程

{
  //ES5中回调解决异步操作的问题;
  //前端和服务端通信有一个ajax的过程；     
  let ajax =function(callback){
  
    console.log('执行');
    setTimeout(function(){
        //判断这个回调是不是存在，如果存在就执行下一步；
        callback && callback.call();
    },1000);
    
  };
  
  //使用：调用这个方法，传一个回调函数；
  ajax(function(){
    console.log('timeout1');
  });
  
  //输出结果：先输出了 执行（这个是ajax这个函数这个步骤执行的）
    一秒钟之后执行了回调函数，输出了 timeout1；               
}

3.Promise--then方法

• 如果这个过程变的复杂，先执行a在执行b，b完了之后在执行c，以此类推，用回调的方式去处理，这个代码写法将非常复杂；
• 这个代码的复杂影响了后期的维护；很难一眼看出来这个回调的顺序问题，到底哪个在前哪个在后；

{
    let ajax = function(){
    
        console.log('执行2');
        //ajax这个函数运行完之后，返回一个对象，Promise实例，这个实例有了一个then方法，
     就执行下一步的功能；
        //怎么去执行呢？这里面有两个参数resolve,reject;
        //resolve:要执行下一步操作；reject：要中断当前的操作；
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                //一秒钟之后执行下一步的步骤；
                resolve();
            },1000);
        });
    };
    
    //then这个参数这个函数体就是要执行的下一步；
    /*
     *   ajax().then(function(){
     *      //第一个function对应的resolve；
     *       console.log('Promise','timeout2');
     *   },function(){
     *       //第二个function对应的是reject；
     *   });
     */
    
    ajax().then(function(){
        //第一个function对应的resolve；
        console.log('Promise','timeout2');
    });
    
    //输出结果：执行2  Promise timeout2
    
    
}

4.多步回调：

{
    let ajax =function(){
        console.log('执行3');
        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');
    });
    
    //执行3  timeout3
}

5.串行过程 a b c 在中间某一步出错，怎么捕获这个错误

• Promise提供了一个catch方法，捕获异常错误；

{
    let ajax = function(num){
        console.log('执行4');
        return new Promise(function(resolve,reject){
            if(num>5){
                resolve();
            }else{
                throw new Error('出错了');
            }
        );
    };
    
    ajax(6).then(function(){
        console.log('log',6);
    }).catch(function(err){
       console.log('catch',err); 
    });
    //log 6
    
     ajax(3).then(function(){
        console.log('log',3);
    }).catch(function(err){
       console.log('catch',err); 
    });
    //catch Error:出错了
}

6.Promise.all 和Promise.race
eg：1.所有图片加载完在添加到页面

{
    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 showImgs(imgs){
        imgs.forEach(function(img){
            document.body.appendChild(img);
        });
    }
    
    //Promise.all：把多个Proimse实例当做一个Promise实例；
    //all下面一个数组，数组传递进来多个Promise实例；当所有promise实例状态发生改变的时候；
    新的Promise实例才会跟着发生变化；
    （下面这三张图片的状态都完成之后，才会触发Promise.all这个新的Promise对象，所以这个
    Promise对象才会有then方法；
    Promise.all方法返回的是一个Promise实例，所以才可以调用then方法；
    --loadImg本身是一个Promise实例，这个promise实例是做一个图片加载的动作，把三个图片加载
      的动作放在Primose.all这个函数里面，生成一个新的promise实例，当三张图片都加载完之后，
      才会触发显示图片的逻辑；
    Promise.all([
        loadImg('http://i4.buimg.com/567571/dflef0720bea6832.png'),
        loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),
        loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')
    
    ]).then(showImgs);
}

eg:2:场景：三张图片位于三个不同的位置，页面需要加载一张图片，三张图片不知道哪张返回的比较快；

• 三张图片有三个来源，加载出来一个就可以；(先到先得)

{
    //有一个图片加载完就添加到页面上；
    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 showImgs(img){
        let p = document.createElement('p');
        p.appendChild(img);
        document.body.appendChild(p);
    }
    
    //多个实例中，有一个状态先改变，最后这个race实例也会跟着改变，其他的就不在响应了；
     Promise.race([
        loadImg('http://i4.buimg.com/567571/dflef0720bea6832.png'),
        loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),
        loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')
    
    ]).then(showImgs);
    //只显示了一个；


}