es6之深刻理解promise

1、promise入門

1. Promise對象是什麼

回調函數的另外一種原生實現，比以前回調函數的寫法機構清晰，功能強大，

2.之前回調這麼寫

function a(fn){
    let h = 1;
    setTimeout(function(){
        if(h==1){
            fn(h)
        }else{
            throw Error('error！')
        }
    },1000)
}
//調用
a(function(m){
    console.log(m+'callback')
})

3.用Promise 寫回調

function a(){
     return new Promise(function(resole,reject){
         setTimeout(function(){
             if(h==1){
                 resole(h)
             }else{
                 reject(error)
             }
         },1000)
     })
 }
//調用
a().then(function(data){
    console.log(data)
},function(err){
    console.log(err)
})

4.多層回調實現

//函數封裝
function fn(n,callback){
 setTimeout(function(){
     callback(n)
 },1000)
}
function fn2(m,callback){

   setTimeout(function(){
       callback(m)
   },800)
}
function fn3(h,callback){
    setTimeout(function(){
           callback(h)
   },600)
}
//多層回調調用

fn(1, function(n){
                
    console.log('fn='+n);
    fn2(2,function(n2){
        
        console.log('fn2='+n2);
        fn3(3,function(n3){
            
            console.log('fn3='+n3)
            console.log('end')
        })
    })
});

可見(1)中多層回調寫起來很亂，不利於維護，下面用Promise實現

function pm(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(n){
                resolve(n)
            }else{
                reject(error)
            }
        },1000)    
    })
}
function pm2(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(n){
                resolve(n)
            }else{
                reject(error)
            }
        },1000)    
    })
}
function pm3(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(n){
                resolve(n)
            }else{
                reject(error)
            }
        },1000)    
    })
}

//調用
pm(1).then(function(data){
    console.log('pm='+data);
    return pm2(2)
    
}).then(function(data){
    console.log('pm2='+data);
    return pm3(3)
    
}).then(function(data){
    console.log('pm3='+data);
    
})

用promise調用的寫法更加直觀

2、Generator

1.Generator函數

（1）異步編程思想來寫同步代碼
（2）遍歷器生成函數
（3）狀態機，封裝了多個內部狀態。

2.形式

function* abc(){
    //yield 非必須，return 也非必須；
    yield 'a';
    yield 'b';
    return 'c'
}
//調用
var h = abc();
h.next();//{value:'a',done:false}
h.next();//{value:'b',done:false}
h.next();//{value:'c',done:true}
h.next();//{value:undefined,done:true}

3.把Promise用Generator函數表示

function pm(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
        resolve()
        },1000)    
    })
    
    
    
}
function pm2(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },800)    
    })
}
function pm3(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },600)    
    })
}

function* gPm(){
    yield pm(1);
    yield pm2(2);
    yield pm3(3);
}
let p = gPm();
p.next().value.then(function(){
    p.next().value.then(function(){
        p.next().value.then(function(){
        
        })
    })
})

在調用的時候用Generator函數；代碼更加同步化

3、async/await

1. async/await是什麼

（1）異步操做的終極解決方案

2. 寫法

function pm(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
        resolve()
        },1000)    
    })
    
    
    
}
function pm2(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },800)    
    })
}
function pm3(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },600)    
    })
}

async function p(){
    await pm(1)
    await pm2(2)
    await pm3(3)
}
p()

4、總結

無論用then仍是用generator 仍是用async，都保證你寫的function 的返回值是一個 promise對象