深入理解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://cloud.tencent.com/developer/support-plan?invite_code=f12524hxoqvv