w88官方网站「开户送彩金」
  咨询电话:15597448942

w88优德官网中文版登陆

深入理解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**对象