web前端的Promise对象

“Promise对象代表了一个异步操作的最终完成(或者失败)以及这个异步操作所返回的值”,这句话翻译自MDN文档。不过看完之后还是一头雾水,特别是对于从回调地狱过来的人。

在“回调地狱”一文中我们说到这样一段代码:

setTimeout(function(){
    console.log(1);
    setTimeout(function(){
        console.log(2);
        setTimeout(function(){
            console.log(3);
            setTimeout(function(){
                console.log(4);
                setTimeout(function(){
                    console.log(5);
                    setTimeout(function(){
                        console.log(6);
                        setTimeout(function(){
                            console.log(7);
                            setTimeout(function(){
                                console.log(8);
                                setTimeout(function(){
                                    console.log(9);
                                    setTimeout(function(){
                                        console.log(10);
                                        setTimeout(function(){
                                            console.log(11);
                                            setTimeout(function(){
                                                console.log(12);
                                                setTimeout(function(){
                                                    console.log(13);
                                                },13000)
                                            },12000)
                                        },11000)
                                    },10000)
                                },9000)
                            },8000)
                        },7000)
                    },6000)
                },5000)
            },4000)
        },3000)
    },2000)
},1000)

如果引入Promise对象,则可以优化,下面是引入Promise对象之后的处理方法:

new Promise(function(resolve){
	setTimeout(function(){
		console.log(1);
		resolve();
	},1000);
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(2);
			resolve();
		},2000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(3);
			resolve();
		},3000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(4);
			resolve();
		},4000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(5);
			resolve();
		},5000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(6);
			resolve();
		},6000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(7);
			resolve();
		},7000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(8);
			resolve();
		},8000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(9);
			resolve();
		},9000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(10);
			resolve();
		},10000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(11);
			resolve();
		},11000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(12);
			resolve();
		},12000)
	})
}).then(function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			console.log(13);
			resolve();
		},13000)
	})
})

引入Promise对象之后,代码的执行从层层嵌套变成链式操作,优化了代码的可读性,代码逻辑也更容易理清了。

如果需要学习Promise对象相关知识,可以访问以下网站:

发表评论

电子邮件地址不会被公开。 必填项已用*标注