Promise的使用及用法详解

在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);  // 以数组的方式返回所有结果
})