Open
Description
promise？
Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。
在此前，如果要使用一个异步的库，这时候要传入回调函数，这对我们来说就是一个黑盒子，如果你不阅读他的文档或者源码，根本不知道需要传什么东西，而且在多次调用异步函数时，会形成回调地狱，代码会变得非常地不优雅，难以阅读。
使用promise可以规范好代码的逻辑，调用时直接调用，很nice。
//模拟发送网络请求函数
function request(url,callbackSuccess,callbackError){
settimeout(()=>{
if(url==="home"){
//请求成功
let res = "data"
callbackSuccess(res)
}else{
//请求失败
let err = "请求失败"
callbackError(err)
}
},3000)
const callbackSuccess = (res)=>{
console.log(res)
}
const callbackError = (err)=>{
console.log(err)
}
}
//使用promise
function request(url){
return new Promise((resolve,reject)=>{
settimeout(()=>{
if(url==="home"){
//请求成功
let res = "data"
resolve(res)
}else{
//请求失败
let err = "请求失败"
reject(err)
}
},3000)
})
}
//这个存在多种写的，可以分开写、链式调用、也可以将回调都传入then参数里面
request("/home").then((res)=>{
......
}).catch((err)=>{
......
})
promise的三个状态
promise有三个状态：pending(进行中)、fulfilled(已敲定)、rejected(已拒绝),状态一旦确定下来就不会更改了
特殊情况：如果一个promise传入了一个promise，那么这个promise状态的决定权就会交到传入的promise上
promise的finally方法
//finally：不接收参数，无论前面的状态是fulfilled还是rejected，代码都会执行
promise.then().catch().finally(()=>{})
promise的resolve or reject方法
//promise的resolve方法
//直接进行resolve
let promise = new Promise.resolve("res")
let promise = new Promise.reject("err")
promise的all方法
Promise([promise1,promise2,promise3,"随便"]).then(res=>{
//当所有参数中所有的promise都fulfilled之后，返回一个所有结果组成的数组
//如果传入一个非promise,则自动将它resolve
console.log(res)
}.catch(err=>{
//当有一个promise rejected时，它的状态就会变成reject
console.log(err)
})
})
promise的allSettled方法
const p1 = new Promise((resolve)=>{
resolve("p1 resolve")
})
const p2 = new Promise((resolve,reject)=>{
reject("p2 reject")
})
const p3 = new Promise((resolve)=>{
resolve("p3 resolve")
})
Promise.allSettled([p1,p2,p3]).then(res=>{
console.log(res);
//返回
//[{ status: 'fulfilled', value: 'p1 resolve' },
//{ status: 'rejected', reason: 'p2 reject' },
//{ status: 'fulfilled', value: 'p3 resolve' }]
//当所有的结果都出来时，返回一个数组，里面有各个promise的状态和值组成的对象
})
promise的race or any方法
const p1 = new Promise((resolve) => {
setTimeout(() => {
resolve("p1 resolve");
}, 1000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("p1 resolve");
}, 2000);
});
const p3 = new Promise((resolve) => {
setTimeout(() => {
resolve("p1 resolve");
}, 3000);
});
Promise.race([p1,p2,p3]).then(res=>{
console.log(res);
//返回最先执行完的结果
})
Promise.any([p1,p2,p3]).then(res=>{
console.log(res);
//返回最先执行完的resolve
})