(1)：promise对象
什么是promsie,promise字面就是承诺，承诺一段时间做出回应
promise产生的历史原因，回调函数的层层嵌套的回调"地狱"，不够优雅和易用
promise的三种状态 pending fulfilled reject
promise的特点
promise的状态不可逆，要么是成功要么是失败，当处于pending状态，未知是成功还是失败
promise的结果必须通过回调函数返回出去，不然就会处于pending未知状态
promise对象的状态不受外界影响。
(2)： new Promise对象
let p = new Promise((resolve,reject)=>{
setTimeout(() => {
// resolve("success-1")
reject("err-0")
}, 3000);
})
p.then(res=>{
console.log(res);
// 错误捕捉的第一种写法
// },error=>{
// console.log("error",error)
// })
// 错误捕捉的第二种写法
}).catch(err=>{
console.log(err);
})
(3): Promise.resolve
let p = new Promise((resolve,reject)=>{
setTimeout(() => {
resolve("success-1")
// reject("err-0")
}, 3000);
})
let p1 = p.then(res=>{
console.log(res);
return res
}).catch(err=>{
console.log(err);
})
let p2 = p1.then(res=>{
console.log("p1-res",res); //p1-res success-1
// return new Promise((resolve,reject)=>{
// resolve(res)
// })
// 当然也可以这样简写
// return Promise.resolve(res)
// 当然也可以这样
return res
})
p2.then(res=>{
console.log("p2-res",res); // p2-res success-1
})
(4)：promise.all
let p = new Promise((resolve,reject)=>{
setTimeout(() => {
// resolve("success-1")
reject("err-0")
}, 3000);
})
p.then(res=>{
console.log(res);
// 错误捕捉的第一种写法
// },error=>{
// console.log("error",error)
// })
// 错误捕捉的第二种写法
}).catch(err=>{
console.log(err);
})
// promsie.all 处理并发请求
let p1 = new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(11)
}, 1000);
})
let p2 = new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(22)
}, 1000);
})
let p3 = new Promise((resolve,reject)=>{
setTimeout(() => {
reject(33)
}, 1000);
})
let p4 = new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(44)
}, 1000);
})
let arr = [p1,p2,p3,p4]
Promise.all(arr).then(res=>{ // 对于有一个报错，只会返回当前对应的队列的promise的错误消息
console.log("res===",res)
}).catch(err=>{
console.log("err===",err); // 33
})
- 很显然我们想要所有的结果(不管是成功还是失败),那么如何解决promise.all的错误造成其它promise不执行
<font color="#f60">1: 批量处理promiseAll错误</font>
// 批量处理promsie错误、
async function watchPromiseError(p) {
try {
console.log("p",p);
const data = await p;
return {
err:0,
res: data
}
} catch (error) {
return {
err: 1,
res:error
}
}
}
let arr = [p1,p2,p3,p4]
Promise.all(arr.map(item=>watchPromiseError(item))).then(res=>{ // 对于有一个报错，只会返回当前对应的队列的promise的错误消息
console.log("res===",res)
/* { err: 0, res: 11 },
{ err: 0, res: 22 },
{ err: 1, res: 33 },
{ err: 0, res: 44 } */
}).catch(err=>{
console.log("err===",err); // 33
})
<font color="#f60">2: 批量处理promiseAll错误</font>
let arr = [p1,p2,p3,p4]
Promise.allSettled(arr).then(res=>{ // 对于有一个报错，只会返回当前对应的队列的promise的错误消息
console.log("res===",res)
/* { status: 'fulfilled', value: 11 },
{ status: 'fulfilled', value: 22 },
{ status: 'rejected', reason: 33 },
{ status: 'fulfilled', value: 44 } */
}).catch(err=>{
console.log("err===",err); // 33
})
(5)：promise.race
- <font color="#f60">race顾名思义就是赛跑的意思，谁快执行谁</font>
let p1 = new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(11)
}, 1000);
})
let p2 = new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(22)
}, 1000);
})
let p3 = new Promise((resolve,reject)=>{
setTimeout(() => {
reject(33)
}, 1000);
})
let p4 = new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(44)
}, 1000);
})
let arr = [p1,p2,p3,p4]
Promise.race(arr).then(res=>{
console.log("res===",res) // 22
}).catch(err=>{
console.log("err===",err);
})
在这里插入图片描述
- <font color="#f60">那么我们给p1改为2秒</font>
let p1 = new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(11)
}, 2000);
})
在这里插入图片描述
- <font color="#f60">对于报错呢race怎么处理，是不是也是只返回执行最快的那个promise对象错误消息呢</font>
- <font color="#f60">我们把p1改为reject</font>
let p1 = new Promise((resolve,reject)=>{
setTimeout(() => {
reject(11)
}, 1000);
})
在这里插入图片描述
（5): 面试官你TM会promise，倒是就手写一个啊
class MyPromise {
constructor(executor) {
// 规定状态
this.state = "pending"
// 保存 `resolve(res)` 的res值
this.value = undefined
// 保存 `reject(err)` 的err值
this.reason = undefined
// 成功存放的数组
this.successCB = []
// 失败存放的数组
this.failCB = []
let resolve = (value) => {
if (this.state === "pending") {
this.state = "fulfilled"
this.value = value
this.successCB.forEach(f => f())
}
}
let reject = (reason) => {
if (this.state === "pending") {
this.state = "rejected"
this.value = value
this.failCB.forEach(f => f())
}
}
try {
// 执行
executor(resolve, reject)
} catch (error) {
// 若出错，直接调用reject
reject(error)
}
}
then(onFulfilled, onRejected) {
if (this.state === "fulfilled") {
onFulfilled(this.value)
}
if (this.state === "rejected") {
onRejected(this.value)
}
if (this.state === "pending") {
this.successCB.push(() => { onFulfilled(this.value) })
this.failCB.push(() => { onRejected(this.reason) })
}
}
}
let p11 = new MyPromise((resolve,reject)=>{
setTimeout(() => {
reject(11)
}, 100);
})
p11.then(res=>{
console.log("res",res); // 11
})
