在ES6中,新增了Promise这个类 用来处理异步代码
// Promise用法:
因Promise是一个类,所以需要new Promise来使用
// 在new时 Promise需要传入一个参数 参数为回调函数 这个回调函数在创建时就会被立即调用
// 该回调函数有俩个参数 分别也是回调函数 resolve 和 reject(为形参名可随意起名)
// 当第一个回调参数被调用时,会调用new出来的这个对象下的then方法,then方法中的参数也是个回调函数 此时就会执行这个回调参数
// 当第二个回调参数被调用时,会调用new出来的这个对象下的catch方法,catch方法中参数也是个回调函数此时就会执行这个回调参数
const num = 1;
const promise = new Promise((resolve,reject) => {
console.log('当对象被创建时就会执行这个回调函数');
// 根据业务逻辑代码来调用回调参数
num === 1 ? resolve() : reject()
// 当执行resolve方法时 就会执行当前对象下的then方法
// 当执行reject方法时 就会执行当前对象下的catch方法
});
promise.then(res => {
console.log('当前num为1执行resolve方法,我被回调了')
});
promise.catch(res => {
console.log('当前num为其他值,执行reject方法,我被回调了')
});
// 当然也可以传参来实现数据传递
// 在调用Promise俩个回调函数时
resolve('实参');
reject('实参');
// 在对应的回调then catch中 就可以使用传递的实参
then( res => { // res 为形参 resolve调用时传递来的
console.log(res);
});
catch( err => { // err 为形参 reject调用时传递来的
console.log(err);
});
链式实现:
// 在上面代码中 是实现了new出一个对象 定义了个常量来接收了 不用常量接收直接使用时
const num = 2;
new Promise((r,e) => { // r(resolve) e(reject)
// 异步逻辑代码
num === 1 ? r(num) : e(num) // 同一个逻辑中只能执行一种状态方式
}).then(res => {
console.log(`num为1时被调用,num为:${res}`)
}).catch(err => {
console.log(`num为2时被调用,num为:${err}`)
})
then方法解释:
// then方法是new时返回对象里的方法 也就是Promise里内置的一些方法
// then可以有第二个回调参数 这个回调参数就是catch
const num = 1;
new Promise((r,e) => {
// 异步逻辑代码
num === 1 ? r(num) : e(num)
}).then(res => { // 为r(resolve)调用时执行的方法
console.log(`num为1时被调用,num为:${res}`)
}, err => { // 为e(reject)调用时执行的方法
console.log(`num为2时被调用,num为:${err}`)
})
// 在then方法里 会返回一个新的Promise 这就是Promise链式调用的本质
// 在then里如果返回的是一个普通值(数字/字符串/普通对象/undefined) 那么这个返回值就会作为这个新返回对象里的resolve调用时传参的值 此时再链式调用then方法调用的就是新Promise对象的方法
// 如果返回的是一个Promise,当前状态就会变成返回Promise里的状态 同理返回一个对象 里面包含then方法时 也会改变状态
catch方法解释:
// catch方法在new的Promise中的回调函数里调用第二个参数(reject)时,就会回调catch方法里的回调参数 (也可是then中的第二个回调参数)。
// 在在new的Promise中的回调函数抛出异常时也会回调这个回调参数
const num = 1;
new Promise((resolve,reject) => {
if(num === 2) {
resolve(num);
}else {
// reject(num); // 此时就会回调catch里的会调参数
throw new Error('num不为2',num); // 此时也会回调catch里的会调参数
}
}).then(res => {
console.log(`num等于2时:${res}`)
}).catch(err => {
console.log(`num不等于2时:${err}`)
})
finally方法解释:
// finally 无论什么状态都会执行
const num = 1;
new Promise((resolve,reject) => {
num === 1 ? resolve(num) : reject(num);
}).then(res => {
console.log(`num等于1时:${res}`)
}).catch(err => {
console.log(`num不等于1时:${err}`)
}).finally(() => {
console.log(`都会执行`)
})
Promise类上的方法 all / allSettled
// all方法可以多个Promise一起使用 统一返回所有结果
const num = 1;
const p1 = new Promise((r,t) => {
num === 1 ? r(num) : t(num);
})
const p2 = new Promise((r,t) => {
num === 1 ? r(num) : t(num);
})
const p3 = new Promise((r,t) => {
num === 1 ? r(num) : t(num);
})
Promise.all([p1,p2,p3]).then((res) => {
console.log(res); // [1,1,1] 以数组的方式返回所有结果
})
// 当其中一个抛出异常 或者执行t(reject)方法时会在执行处阻断Promise,下面的Promise执行就会被阻断
// 如若不乡阻断,可以用类allSettled方法
Promise.allSettled([p1,p2,p3]).then((res) => {
console.log(res); // 以数组的方式返回所有结果
})