Promise简介
Promise 是异步编程的一种解决方案，有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise的方法
console.log(Promise.prototype)
image.png
可以发现Promise的方法有catch，finally，then ，all，race，resolve，reject;
接下来让我们一步一步解析这几个方法
首先我们需要初始化一个promise对象
let promise = new Promise((resolve,reject)=>{
console.log('promise对象创建成功') //promise对象创建成功
console.log(resolve) // ƒ () { [native code] } ƒ () { [native code] }
})
console.log('promise对象下面执行的操作') //promise对象下面执行的操作
image.png
可见promise里的resolve，reject是两个函数，一个成功回调，一个失败回调 。
let promise = new Promise((resolve,reject)=>{
const num=Math.random()*10;
if(num>5){
resolve('成功回调-num='+num)
}else{
reject('失败回调-num='+num)
}
})
promise.then((resolve)=>{
console.log(resolve) //成功回调
},(reject)=>{
console.log(reject) //失败回调
})
Promise 实例 调用then方法，里面有两个回调函数，第一个代表是成功回调，第二个代表失败回调，第二个回调函数可以省略，用catch来代替、结果是一样的,成功回调函数里抛出的错误，catch也是能捕获到的。
let promise = new Promise((resolve,reject)=>{
const num=Math.random()*10;
if(num>5){
resolve('成功回调-num='+num)
}else{
reject('失败回调-num='+num)
}
})
promise.then((resolve)=>{
console.log(resolve)
}).catch((reject)=>{
console.log(reject)
})
当promise执行完成功回调，或者失败回调之后，都会执行finally里的函数。
let promise = new Promise((resolve,reject)=>{
const num=Math.random()*10;
if(num>5){
resolve('成功回调-num='+num)
}else{
reject('失败回调-num='+num)
}
})
promise.then((resolve)=>{
console.log(resolve)
}).catch((reject)=>{
console.log(reject)
}).finally(()=>{
console.log('最后执行的函数')
})
Promise对象的all，和race 方法类似，一个是promise实例全部执行完成后执行，另一个则是只要有一个实例完成之后就执行then方法里的回调函数
let p1 = new Promise((resolve,reject)=>{
const num=Math.random()*10;
console.log('直接执行的p1')
setTimeout(()=>{
if(num>5){
resolve('p1->promise对象，成功回调-num='+num)
}else{
reject('p1->promise对象，失败回调-num='+num)
}
},2000)
})
let p2 = new Promise((resolve,reject)=>{
console.log('直接执行的p2')
const num1=Math.random()*10;
setTimeout(()=>{
if(num1>5){
resolve('p2->promise对象，成功回调-num1='+num1)
}else{
reject('p2->promise对象，失败回调-num=1'+num1)
}
},1000)
})
Promise.race([p1,p2]).then((result)=>{
console.log(result,'成功一个')
}).catch((error)=>{
console.log(error,'失败一个')
})
image.png
let p1 = new Promise((resolve,reject)=>{
const num=Math.random()*10;
console.log('直接执行的p1')
setTimeout(()=>{
if(num>5){
resolve('p1->promise对象，成功回调-num='+num)
}else{
reject('p1->promise对象，失败回调-num='+num)
}
},2000)
})
p1.then((result)=>{
console.log(result)
}).catch((error)=>{
console.log(error)
})
let p2 = new Promise((resolve,reject)=>{
console.log('直接执行的p2')
const num1=Math.random()*10;
setTimeout(()=>{
if(num1>5){
resolve('p2->promise对象，成功回调-num1='+num1)
}else{
reject('p2->promise对象，失败回调-num=1'+num1)
}
},1000)
})
p2.then((result)=>{
console.log(result)
}).catch((error)=>{
console.log(error)
})
Promise.all([p1,p2]).then((result)=>{
console.log(result+'成功一个')
},(error)=>{
console.log(error+'失败一个')
})
如果两个都是resolve对象，则result返回的是一个数组，里面是两个result的参数，因为我拼接了字符串，所有打印的结果是字符串，
如果其中有个是失败回调，则会调用则会调用all方法里的失败回调，一旦p1实例，或者p2实例触发reject方法，则会立即调用all方法里的失败回调。
这个是失败回调
image.png
这个是成功回调
image.png
为方便查看输出数据形式，我把拼接的字符串改成了,
Promise.all([p1,p2]).then((result)=>{
console.log(result,'成功一个')
}).catch((error)=>{
console.log(error,'失败一个')
})
还有Promise.resolve，Promise.reject
let p1 = Promise.resolve('这就是个成功的回调函数')
p1.then((resolve)=>{
console.log(resolve) // 这就是个成功的回调函数
})
let p2 = Promise.reject('这就是个失败的回调函数')
p2.then(resolve=>{
},(reject)=>{
console.log(reject) // 这就是个失败的回调函数
})
失败回调函数在then方法的第二个参数里定义的，如果不写第二个参数，虽然也能输出，但是控制台会显示未捕获reject,要想正常输出失败回调，要么在then里写两个回调函数，要么直接catch捕获错误。
可见Promise.resolve等价于new Promise(resolve => resolve())
Promise.reject等价于new Promise((resolve, reject) => reject())
网友评论