Promise的强大之处不仅仅是可以解决回调地狱的问题,还可以处理多个并发的请求
Promise是对于异步状态进行一个管理,是可以用来解决异步的问题的
Promise.resolve()
用来展示成功的状态
let p1 = Promise.resolve('success')
console.log(p1)
p1.then(res => {
console.log(res)
})
Promise.reject()
用来展示失败的状态
let p2 = Promise.reject('fail')
console.log(p2)
p2.catch(err => {
console.log(p2)
})
实例
function foo(flag){
if(flag){
reject new Promise(resolve => {
// 异步操作 ...
resolve('success')
})
} else {
// return 'fail'
return Promise.resolve('fail')
// return Promise.reject('err fail')
}
}
foo(true).then(res => {
console.log(res) // success
})
foo(false).then(res => {
console.log(res) // fail
}, err => {
console.log(err) // err fail
})
当这三个异步操作执行结束之后再执行下一步
let p1 = new Promise((resolve, reject) => {
setTimeout(()=>{
console.log(1)
resolve('1成功')
}, 1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(()=>{
console.log(2)
resolve('2成功')
// reject('2失败')
}, 2000)
})
let p3 = new Promise((resolve, reject) => {
setTimeout(()=>{
console.log(3)
resolve('3成功')
}, 3000)
})
Promise.all()
- 后面是一个数组,数组里面的每一个内容都是一个Promise对象,表示的是里面所有的内容都执行成功的时候它才会执行
Promise.all([p1, p2, p3]).then(res => {
console.log(res) // ['1成功', '2成功', '3成功']
}, err => {
conosle.log(err) // Promise.all() 只要有一个失败的,它就认为整个都是失败的
})
Promise.race()
- 跟Promise.all()的区别是 当下面的进程有一个是完成的,它就认为整个都完成了
Promise.race([p1, p2, p3]).then(res => {
console.log(res) // 1成功
}, err => {
conosle.log(err) // 只要有一个失败的,就认为整个都是失败的
})
- Promise.all() 实例:
const imgArr = ['1.jpg', '2,jpg', '3.jpg']
let promiseArr = []
imgArr.forEach(item => {
promiseArr.push(new Promise((resolve, reject) => {
// 图片上传的操作
resolve()
}))
})
Promise.all(promiseArr).then(res => {
// 插入数据库的操作
console.log('图片全部上传完成')
})
- Promise.race() 实例
function getImg(){
return new Promise((resolve, reject) => {
let img = new Image()
img.onload = function(){
resolve(img)
}
img.src = 'xxx.jpg'
})
}
function timeout(){
return new Promise((resolve, reject) => {
setTimeout(()=>{
reject('图片请求超时')
},2000)
})
}
Promise.race([getImg(), timeout()]).then(res => {
console.log(res)
}).catch(err=> {
console.log(err)
})
- 如果图片地址是个正确的地址的话,那么getImg就会先执行输出,如果图片地址错误的话就会执行下面的输出,达到一个超时或者计时的目的