欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

对于 ES6 Promise 的个人理解

程序员文章站 2022-07-02 22:55:26
...

说到Promise,我的第一反应其实是回调地狱,来看看下面这段代码应该就是典型的回调地狱了

var fn = function(){
	var t1 = setTimeout( ()=>{
		var t2 = setTimeout( ()=>{ 
			var t2 = setTimeout( ()=>{
				console.log(2);
			},2000 )
			console.log(3)
		},2000)
		console.log(1);
	},2000)
}
fn() // 1, 2, 3

这种写法看起来是不是非常头疼?虽然头疼,但是却在很多场合下无可避免;比如说你向服务器发送一个请求,然后等待请求回来,拿到返回值,利用返回值作为参数在发送下一次请求的时候,就无可避免的遇到这种写法;

而Promise就是为了解决这种异步编程产生的,Promise有3个状态,padding( 等待 ),resolve( 成功 ),reject( 失败 );根据不同的状态执行不同的结果,下面上代码

// 创建一个Promise对象
var fn = function(){
	return new Promise((resolve,reject) => {
		var t = setTimeout( ()=>{
			resolve(1)
			reject(2)
		}, 2000 )
	})
}
//调用函数返回Promise对象,Promise对象有一个then方法方法接收两个参数res, rej表示成功与失败的状态
// Promise 只能同时存在一种状态,如果状态为resolve(成功),那么reject的状态就不会执行,如果状态为reject(失败),那么resolve的就不会执行
fn().then( res=>{ 
	console.log(res) //  1
	console.log(1);
	return fn()
}).then( res=>{
	console.log(2);
	return fn()
}).then(res=>{
	console.log(3);
	return fn()
}).then(...)
// 1, 2, 3

输出和上面的是一样的,但是代码的可读性确提高了很多,将回调的层级结构一层一层抛出,将其变成了链式结构,这样一来如果代码出现问题,就不用 1 2 3 44 3 2 1 这样一层一层剖开找问题,而是11 22 33 44 哪里可能出现问题可以很快定位到;

最后还有一个问题,我不太明白,就是为什么已经有ES6的Promise了,为什么ES7 的时候还要推出async和await呢?他对比Promise有了哪些优势?或者是解决了Promise的某些问题吗?

 PS:小白一个,如果理解的不对,希望大佬们能够多多指教,万分感谢!!
相关标签: es6 javascript js

上一篇: Windows 使用技巧

下一篇: 性能优化