前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >es6之深入理解promise对象

es6之深入理解promise对象

原创
作者头像
连小壮
修改2018-08-22 10:12:47
2750
修改2018-08-22 10:12:47
举报
文章被收录于专栏:小壮和前端

<font color=red>一、promise入门</font>

1. Promise对象是什么

代码语言:txt
复制
回调函数的另一种原生实现,比之前回调函数的写法机构清晰,功能强大,

2.以前回调这么写

代码语言:txt
复制
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 写回调

代码语言:txt
复制
 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.多层回调实现

代码语言:txt
复制
//函数封装
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实现

代码语言:txt
复制
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调用的写法更加直观

<font color=red>二、Generator</font>

1.Generator函数

代码语言:txt
复制
(1)异步编程思想来写同步代码
(2)遍历器生成函数
(3)状态机,封装了多个内部状态。

2.形式

代码语言:txt
复制
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函数表示

代码语言:txt
复制
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函数;代码更加同步化

<font color=red>三、async/await</font>

1. async/await是什么

代码语言:txt
复制
(1)异步操作的终极解决方案

2. 写法

代码语言:txt
复制
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()

<font color=red>四、总结</font>

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • <font color=red>一、promise入门</font>
    • 1. Promise对象是什么
      • 2.以前回调这么写
        • 3.用Promise 写回调
          • 4.多层回调实现
            • 1.Generator函数
            • 2.形式
            • 3.把Promise用Generator函数表示
            • 1. async/await是什么
            • 2. 写法
        • <font color=red>二、Generator</font>
        • <font color=red>三、async/await</font>
        • <font color=red>四、总结</font>
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档