1. promise作用:
promise:解决异步回调的问题
2. 目的:
创建异步对象,当异步对象中的异步操作执行完成之后,再执行想要执行的东西。
- resolve表示将状态变成成功完成,reject表示将状态变成失败完成
- 当resolve方法执行完成之后,再执行then方法
let p = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('执行完毕');
resolve();
// 表示完成
}, 3000)
})
p.then(() => {
console.log('promise异步操作完成了');
})
3. Promise传参
resolve里的参数可以传给then
let p = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("执行完毕");
resolve(3)
}, 1000);
})
p.then((d) => {
console.log("接收到resolve传递的参数:", d);
})
4. promise错误处理
reject中存储错误的参数,可以传给then方法中的第二个参数
let p = new Promise((resolve, reject) => {
setTimeout(() => {
// resolve(3) //执行成功传递的参数
reject('404') //执行失败传递的参数
}, 1000);
})
p.then((res) => {
console.log("接收成功传递的参数", res); //没有resolve,不会经过这里
}, (err) => {
console.log('接收执行失败传递的参数:', err);
})
5. promise对象的then方法 和catch方法
- Promise对象的then方法有两个参数,一个是成功后的参数,另一个是失败的参数方法
let a = 1;
let promise = new Promise(function (resolve, reject) {
if (a == 10) {
resolve('成功')
} else {
reject("失败")
}
})
// promise.then(success,fail)
promise.then(res => {
console.log("成功调用", res);
}, err => {
console.log("失败调用", err);
})
- new Promise().catch() ————> 错误捕获
promise.then(res => {
console.log(res); // resolve
}).catch(err => {
console.log(err); // 等同于接受 上面的reject返回的失败
})
6.Promise的方法
- promise.resolve("成功"),将现有的东西,转成一个Promise对象,且是resolve成功状态
let p1 = Promise.resolve('123');
p1.then(res => {
console.log(res);
})
- promise.reject('失败'),将现有的东西,转成一个promise对象,且是reject失败状态
let p2 = Promise.reject('456');
p2.catch(err => {
console.log(err);
})
- Promise.race():与Promise.all() 的不同之处在于,它将与第一个传递的promise相同的完成方式被完成。他可以是resolves,也可以使rejects,这要取决于第一个完成的方式是两个中的哪个。
// 如果传的跌代是空的,则返回的 promise将永远等待。
// 如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺,则Promise.race将解析成为迭代中找到的第一个值。
let p1 = Promise.reject('aaa')
let p2 = Promise.reject('bbb')
let p3 = Promise.reject('ccc')
Promise.race([p1, p2, p3]).then(res => {
console.log(res);
}).catch(err => {
console.log(err); //输出aaa
})
- Promise.all() ————> 一个脚本中有多个promise时,监控多个Promise对象
// promise.all([p1,p2,p3]):把promise打包,扔到一个数组里面,打包完还是一个promise对象
let p1 = new Promise((resolve, reject) => {
let time = Math.random() * 4000 + 1000;
setTimeout(() => {
console.log('P1完成');
resolve();
}, time)
})
let p2 = new Promise((resolve, reject) => {
let time = Math.random() * 4000 + 1000;
setTimeout(() => {
console.log('p2完成');
resolve()
}, time);
})
let p3 = new Promise((resolve, reject) => {
let time = Math.random() * 4000 + 1000;
setTimeout(() => {
console.log('p3完成');
reject()
}, time);
})
// 必须确保所有Promise 对象都是resolve状态
let p = Promise.all([p1, p2])
p.then(() => {
// p1 和 p2 全部执行完毕后,才会执行then方法里面的操作
console.log('全部执行完成');
})
7. 案例:用户登录成功后再获取用户信息
let status = 1;
let userLogin = (resolve, reject) => {
setTimeout(() => {
if (status == 1) {
resolve({
data: '登陆成功',
msg: 'xxxx',
token: "xxsdasdfsa"
})
} else {
reject("失败了")
}
}, 2000);
}
let getUserInfo = (resolve, reject) => {
setTimeout(() => {
if (status == 1) {
resolve({
data: "获取用户信息成功",
msg: "cdcdcd",
token: "sndishishdissdsmmsadf"
})
} else {
reject('失败了')
}
}, 1000);
}
new Promise(userLogin).then(res => {
console.log("用户登录成功");
return new Promise(getUserInfo)
}).then(res => {
console.log('获取用户信息成功');
console.log(res);
})