Promise基本用法 20211130

promise 是一个拥有 then 方法的对象或函数，其行为符合本规范；
then 方法接受两个参数 onFulfilled, onRejected 。前者是成功的回调，后者是失败的回调。如果Promise里面执行的是resolve进入onFulfilled，执行reject进入onRejected。

new Promise((reslove, reject) => {
    
        console.log(1111);
        setTimeout(() => {
    
            console.log('setTimeut', 2222);
            reslove(1);
        }, 1000);
    }).then(
        res => {
    
            console.log(3333);
        },
        err => console.log(err),
    );

// 1111
// setTimeout 2222
// 3333

Promise.all

使用场景：一次请求多个接口，需要拿到全部信息后进行操作。

let promise1 = Promise.resolve(1111);
let promise2 = new Promise((resolve, reject) => {
    
    setTimeout(resolve, 1000, 2222); // setTimeout的第三个参数会传入setTimeout第一个参数也就是执行方法里
});
let promise3 = new Promise((resolve, reject) => {
    
    setTimeout(resolve, 2000, 3333);
});
Promise.all([promise1, promise2, promise3]).then((values) => {
    
    console.log(values);
}).catch((err) => console.log(err));

// [1111, 2222, 3333]

只要任意一个Promise变成rejected状态都会走catch

let promise1 = Promise.resolve(1111);
let promise2 = new Promise((resolve, reject) => {
    
    setTimeout(reject, 1000, 2222);
    });
let promise3 = new Promise((resolve, reject) => {
    
    setTimeout(resolve, 2000, 3333);
});
Promise.all([promise1, promise2, promise3]).then((values) => {
    
    console.log(values);
}).catch((err) => console.log(err));

// 2222
// promise2 里面换成了reject，直接走catch

Promise.allSettled

无论是有失败的请求，他都会走then并用对象将结果包起来

let promise1 = Promise.resolve(1111);
let promise2 = new Promise( (resolve, reject) => {
    
    setTimeout(reject, 1000, 2222);
});
let promise3 = new Promise( (resolve, reject) => {
    
    setTimeout(resolve, 2000, 3333);
});
Promise.allSettled([promise1, promise2, promise3])
    .then((values) => {
    
        console.log(values);
    })
    .catch((err) => console.log(err));

// [
// { status: 'fufilled', value: 1111 },
// { status: 'rejected', value: 2222 },
// { status: 'fufilled', value: 3333 }
// ]

Promise.race

多个请求中，那个先执行就返回该请求的结果

let promise2 = new Promise( (resolve, reject) => {
    
    setTimeout(resolve, 1000, 2222);
});
let promise3 = new Promise( (resolve, reject) => {
    
    setTimeout(resolve, 2000, 3333);
});
Promise.race([ promise2, promise3])
    .then( (values) => {
    
        console.log(values);
    })

// 2222

Promise 值穿透 及如何中断Promise 链式请求

穿透

Promise.resolve(1)
    .then(2) // 注意这里
    .then(Promise.resolve(3))
    .then(console.log);   // 输出1 这里写法等于 .then(e => console.log(e))

return 一个值修改下一个then里面的value

Promise.resolve(1)
    .then(() => 2)
    .then(Promise.resolve(3))
    .then(console.log)  // 输出2
          
Promise.resolve(1)
    .then(() => 2)
    .then(() => Promise.resolve(3))
    .then(console.log)  // 输出3

中断Promise只有一种方法，那就是让他的状态变始终停留在pending
Promise是有三种状态 pending，fulfilled，rejected

const promise = new Promise((resolve, reject) => {
    
        resolve(111);
    }).then((res) => {
    
        console.log(res)  //打印111
        return  222
    }).then(res => {
    
        console.log(res)  //打印222
        return new Promise(() => {
    })
    }).then(res => {
    
        console.log(3333)  //不会打印，被中断了
    })