Promise 笔记
1、promise 的基本概念
首先,Promise 它 拥有三种状态以及对应的标识符
Pending --> 创建后就会是这种的状态
Fulfilled --> resolve (成功、接受)
Reject --> reject (失败、拒绝)
Promise的状态一旦改变就确定了。 Pending --> resolve/reject 不可逆
2、promise 的基本操作
当 promise 创建后,并且函数内部没有相应的 resolve/reject 函数的时候,他就是 pending 状态
const p1 = new Promise((resolve, reject) => {
})
console.log('p1: ', p1); // 此时的输出是 pending 状态的
另外两个状态都是自己通过判断来完成的, resolve === 成功 , reject === 失败
与之对应的语法就是 .then 和 .catch
通过判断进入 resolve 会执行.then 里面的代码,进入reject 就会执行 .catch 里面的代码
const flag = true
const pro = new Promise((resolve, reject) => {
if (flag){
resolve('resolve')
} else {
reject('reject')
}
})
pro.then((res) => {
console.log('成功了', res)
})
.catch((err) => {
console.log('失败了', err)
})
补充一个 .finally ,这是无论你前面如何判断,如何进入,都会进入这个函数
const flag = true
const pro = new Promise((resolve, reject) => {
if (flag){
resolve('resolve')
} else {
reject('reject')
}
})
pro.then((res) => {
console.log('成功了', res)
})
.catch((err) => {
console.log('失败了', err)
})
.finally(() => {
console.log('pro中的 finally');
})
3、promise的链式调用
我们知道了,pro.then 是在进入 resolve 后会执行的内容,promise可以支持多个.then 按顺序执行
并且第二次.then传入的参数,是 第一次处理后传出来的值
只有 .then 可以这样使用 .catch 只会进入第一次就结束
// Promise 的链式调用
const flag = true
const pro2 = new Promise((resolve, reject) => {
if (flag){
resolve(200)
}else {
reject(404)
}
}).then(res => res + 100)
.then(res => console.log('这是第二个res:', res))
.catch(res => console.log('这是错误的res: ', res))
.finally(() => console.log('pro2中的finally'))
当然,如果直接进入 reject 也会直接 进入第一个然后结束
const flag = false
const pro2 = new Promise((resolve, reject) => {
if (flag){
resolve(200)
}else {
reject(404)
}
}).then(res => res + 100)
.then(res => console.log('这是第二个res:', res))
.catch(res => console.log('这是错误的res: ', res))
.catch(res => console.log('这是错误的第二个res: ', res))
.finally(() => console.log('pro2中的finally'))
当然最后还是会进入 .finally
4、promise 的异步
// Promise的 异步 变成 同步
function one(){
return 'I AM one'
}
function two(){
setTimeout(() => {
console.log('I AM two!');
}, 3000)
}
function three(){
return 'I AM three'
}
function run(){
console.log(one());
two();
console.log(three());
}
run()
如果加入 async 和 await
// Promise的 异步 变成 同步
function one(){
return 'I AM one'
}
// function two(){
// setTimeout(() => {
// console.log('I AM two!');
// }, 3000)
// }
function two(){
return new Promise ((resolve, reject) => {
setTimeout(() => {
resolve('I AM TWO')
}, 3000)
})
}
function three(){
return 'I AM three'
}
// function run(){
// console.log(one());
// two();
// console.log(three());
// }
async function run(){
console.log(one());
console.log(await two());
console.log(three());
}
run()
如此便可以,保证 在执行完 two 后,再执行 three
5、promise的 all/race 方法
.all 方法,promise 的一个方法,这个方法传入的 参数是 一个 promise 数组
有两种情况:
1、当传入的 promise 数组,全部都是 resolve 的时候,输出一个 promise中 resolve 的 结果集合
// promise 的 all /race 方法
const createPromise = (delay, flag = true) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (flag){
resolve(`成功${delay}`)
}else {
reject(`失败${delay}`)
}
}, delay)
})
}
Promise.all([createPromise(1000), createPromise(2000), createPromise(3000)])
.then(res => console.log('成功 ', res))
.catch(err => console.log('失败 ', err))
并且会在,最后一个执行完毕后,再将 结果数组 一并输出
2、当传入的 promise 数组,只要有一个 是 reject(错误、失败、拒绝)状态,那么最后输出的 结果 就只有一个 错误状态
// promise 的 all /race 方法
const createPromise = (delay, flag = true) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (flag){
resolve(`成功${delay}`)
}else {
reject(`失败${delay}`)
}
}, delay)
})
}
Promise.all([createPromise(1000), createPromise(2000, false), createPromise(3000)])
.then(res => console.log('成功 ', res))
.catch(err => console.log('失败 ', err))
等待两秒后输出,就是因为,只要promise 数组中有一个 判断出了 reject 就会停止后面的判断,直接输出那一个错误信息
.race 方法,顾名思义就是 赛跑,的意思,谁先结束,就执行谁,不管对错,只返回一个
const createPromise = (delay, flag = true) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (flag){
resolve(`成功${delay}`)
}else {
reject(`失败${delay}`)
}
}, delay)
})
}
// Promise.all([createPromise(1000), createPromise(2000, false), createPromise(3000)])
// .then(res => console.log('成功 ', res))
// .catch(err => console.log('失败 ', err))
Promise.race([createPromise(2000, false), createPromise(1000), createPromise(3000)])
.then(res => console.log('成功 ', res))
.catch(err => console.log('失败 ', err))
当 1000 的定义为 false 时:
const createPromise = (delay, flag = true) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (flag){
resolve(`成功${delay}`)
}else {
reject(`失败${delay}`)
}
}, delay)
})
}
// Promise.all([createPromise(1000), createPromise(2000, false), createPromise(3000)])
// .then(res => console.log('成功 ', res))
// .catch(err => console.log('失败 ', err))
Promise.race([createPromise(2000), createPromise(1000, false), createPromise(3000)])
.then(res => console.log('成功 ', res))
.catch(err => console.log('失败 ', err))
没了。。。