Promise的基本语法
// resolve和reject是Promise内提供的2个函数, 用于回调返回结果到外面
resolve(成功结果) // 触发.then()小括号里函数体执行
reject(失败结果) // 触发.catch()小括号里函数体执行
let p = new Promise((resolve, reject) => {
// resolve和reject是Promise内提供的2个函数, 用于回调返回结果到外面
// resolve('成功了')
reject('失败了')
})
p.then(res => {
console.log(res)
}).catch(err => {
console.error(err)
})
Promise_三种状态和值
三种状态(pending: 准备; resolved(或者fulfilled) 成功; rejected: 失败)
代码表达:
// 1. 创建Promise对象并返回此对象在原地, 并立刻执行函数内代码, 交给浏览器去做倒计时了(异步, 不会阻塞主线程代码往下走, 所以继续走2)
let p = new Promise((resolve, reject) => {
setTimeout(() => {
// 3. 等2秒后, resolve触发, 影响p对象状态
resolve('成功结果') // resolve => fulfilled状态 => .then
// reject('失败结果') // reject => rejected状态 => .catch
}, 2000)
})
// 2. 立刻给p对象添加.then函数并传入函数体等待被调用接收成功结果(此是.then()小括号里函数体不会执行)
p.then(res => {
console.log(res); // 2秒后返回'成功结果'
}).catch(err => {
console.error(err)
})
Promise对象的状态的切换:
- 刚创建会立刻执行new Promise函数内代码, 此时为pending准备状态
- 当Promise对象内异步代码有结果触发resolve, 会导致Promise对象状态为fulfilled兑现成功状
- 当Promise对象内异步代码有结果触发reject, 会导致Promise对象状态为rejected失败状态, 拒绝兑现承诺
- Promise的all方法
作用: 合并多个Promise对象, 等待所有成功后, 返回结果
特点: 返回最终结果是个数组, 值是按顺序对应小Promise对象的成功结果
注意: 如果有1个Promise失败, 则整个Promise对象则失败
Promise.all方法的作用:合并并发多个Promise对象, 等待所有人成功, 按顺序接收结果
代码表述:
-
let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('成功1') }, 2000) }) let p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('成功2') }, 2000) }) let p3 = new Promise((resolve, reject) => { setTimeout(() => { resolve('成功3') }, 2000) }) Promise.all([p1, p2, p3]).then(res => { console.log(res); })
-
Promise的静态方法_race(赛跑机制)
作用: 发起并行多个Promise对象, 等待只要任何一个有结果(成功|失败), 返回结果执行then
特点: 返回第一个有结果的promise对象的结果
Promise.race方法的作用:合并并发多个Promise对象, 接收最先成功的结果
简易说法:谁跑得快,谁就会第一个被看到!
- 代码叙述:
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功1')
}, 2000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功2')
}, 2000)
})
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功3')
}, 2000)
})
Promise.race([p1, p2, p3]).then(res => {
console.log(res);
})
3.Promise的静态方法resolve和reject
Promise.resolve格式: const p = Promise.resolve(值)
Promise.reject格式: const p = Promise.reject(值)
4.Promise的静态方法_allSettled
代码展示:
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('成功1')
}, 2000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功2')
}, 2000)
})
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功3')
}, 2000)
})
Promise.allSettled([p1, p2, p3]).then(res => {
console.log(res);
})
代码展示结果:
1.如若有失败的情况
2.都是成功时的情况: