es6之深入理解promise对象

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

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调用的写法更加直观

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

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函数;代码更加同步化

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

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

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

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

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

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

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

快速排序

快速排序时间复杂度为O(nlogn),由于是在原数组上面利用替换来实现,因此不需要额外的存储空间。 算法思想:   通过设置一个岗哨,每次跟这个岗哨进行比较,比...

21110
来自专栏Golang语言社区

JS基础(上)

JS与DOM的关系 浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象 文档对象模型DOM(Document Obj...

56214
来自专栏技术博文

mysql中int长度的意义

疑问: mysql的字段,unsigned int(4), 和unsinged int(5), 能存储的数值范围是否相同。如果不同,分别是多大? 答: 无论是i...

3034
来自专栏练小习的专栏

CSS计数器 counter

适用场景: 当排序以及序号变动对服务端造成的压力大的情况下,使用css计数。 在早期,只有ol和ul可以对子元素li进行排序,,而CSS2.1规范中加入了co...

2249
来自专栏数据结构笔记

JavaScript中 appendChild追加子节点无效的解决办法

这其实是因为一个元素只能有一个父元素,上面这段代码试图将 btn添加到多个元素中。

1012
来自专栏大数据钻研

前端编码规范

基本原则 结构、样式、行为分离 统一缩进(建议 两个空格) 文件编码统一 不带BOM的UTF-8 一律使用小写字母 省略外链资源 URL 协议部分(FTP等其他...

3427
来自专栏抠抠空间

JavaScript之事件及动画

一、事件 常用事件 click(function(){...}) //单击事件 hover(function(){...}) //鼠标经过事件 b...

2875
来自专栏Golang语言社区

厚土Go学习笔记 | 07. 基本类型

Go语言的基本类型有 bool string int int8 int16 int32 int64 uint uint8 uint16 uint32 uint6...

34512
来自专栏进击的君君的前端之路

DOM操作

1846
来自专栏JavaEE

JavaScript的使用前言

JavaScript作为使用得最多的脚本语言,可以说是无处不在。所有主流浏览器都支持JavaScript。目前,全世界大部分网页都使用JavaScript。它可...

992

扫码关注云+社区

领取腾讯云代金券