对于 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:小白一个,如果理解的不对,希望大佬们能够多多指教,万分感谢!!
上一篇: Windows 使用技巧
下一篇: 性能优化