es6之深切明白promise

一、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挪用的写法越发直观

二、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函数;代码越发同步化

三、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()

四、总结

不管用then照样用generator 照样用async,都保证你写的function 的返回值是一个
promise对象

    原文作者:连小壮
    原文地址: https://segmentfault.com/a/1190000016016382
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞