JavaScript：Promise-CSDN博客

本文链接：https://blog.csdn.net/Hr_ving/article/details/130891293

Promise

基础

一个Promise对象必然处于三种状态中的一种

状态	说明
pending	待定( 初始状态，既没有被兑现，也没有被拒绝 )
fulfilled	已兑现( 意味着操作成功完成 )
rejected	已拒绝( 意味着操作失败 )

console.log(new Promise(()=>{}))

/控制台打印：
Promise {<pending>}
    __proto__: Promise
    [[PromiseState]]: "pending"
    [[PromiseResult]]: undefined

一个Promise对象如果被resolve或者reject，那么状态就不能再进行改变了
.then 和 .catch

/.then() 和 .catch() 方法都会返回一个新的 Promise对象, 并且两者都是异步操作/

.then(func1(), func2()) : 用于状态改变时的Promise对象进行调用 
    - func1 : 状态成功时调用，返回新的Promise，return的值作为新的Promise的result值
    - func2(可选) ：状态失败时调用，返回新的Promise，return的值作为新的Promise的result值

.catch() 方法相当于 第一个参数传null的.then()方法，即：
    .catch((err) => console.log('rejected', err));
    等同于：.then(null, (err) => console.log("rejected:", er));

/在链式调用中，如果中途出现了状态为reject的Promise对象，那么会自动向下寻找最近的失败状态的回调函数,找到了就从失败状态的回调函数继续向下执行，找不到就报错/

then 方法返回的也是一个 Promise 对象，并且这个 Promise 对象的状态由 then 内部的回调函数的执行结果来决定，
不取决于 then 中执行的是成功的回调还是失败的回调。即：then执行的回调函数的 return 值
    - 如果回调函数的 return 值是 非promise类型的值 ， 则 then 方法返回的promise对象的状态为成功fulfilled ，状态值为 return 的值
    - 如果回调函数没有 return 值，根据 js 中的函数的定义，函数的默认 return 值为 undefined，而 undefined 也是 非promise类型的值，所以结果同上
    - 如果回调函数的 return 值 是 promise对象 ，则 then 方法返回的promise对象的状态则取决于这个 return 中的 promise对象的内部状态， 
      内部为resolve, 则 then 返回的状态为fulfilled，内部为reject，则 then 返回的状态为rejected，状态值为resolve / reject 调用时传入的实参

示例

new Promise((resolve, reject)=>{
    resolve(100);
}).then((value)=>{
    console.log(value); // 100
    return 200;
}).then((value)=>{
    console.log(value); // 200
    return new Promise((resolve, reject)=>{
        reject('error');
    });
}).then((value)=>{
    console.log(value); // 未执行这里
    return 300;
}).catch((error)=>{
    console.log(error); // error
    return 400;
}).then((value)=>{
    console.log(value); // 400
})

进阶

async 和 await

async是函数的修饰符，被async修饰的函数会默认返回一个成功状态的Promise对象，Promise对象的结果为：被修饰的函数的返回值
await 是一个只能放在async定义的函数内的修饰符
- 如果被修饰的内容是Promise对象，那么返回值就是Promise对象的结果
- 如果被修饰的内容是其他值，那么就正常返回

示例

async function fn() {
    let a = await 1;
    let b = await new Promise(function (res,rej){
        setTimeout(function (){
        res(2);  
        })
    });
    let c = 3;
    console.log(a,b,c); //打印结果为：1,2,3

    return 'hello world';
} 

fn().then(function (val){
    console.log(val); // 打印结果为：'hello world'
})

方法中嵌套return异步Promise

function func1() {
    return new Promise((resolve, reject)=>{
        resolve(100);
    }).then(()=>{
        return new Promise((resolve, reject)=>{
            resolve(300);
        })
    })
}
let result1 = func1();
result1.then((value)=>{
    console.log(value); // 300
})

Promise.all()

如果数组中所有的 promise的状态都为 resolved时，all方法的状态就为 resolved，如果有一个状态变成了 rejected，那么 all方法的状态就会变成 rejected,并且结果只为第一个reject的Promise的结果
参数:一个数组，数组的每一项都是一个 promise对象

let p1 = new Promise((resolve, reject)=>{
    resolve(100);
})
let p2 = new Promise((resolve, reject)=>{
    resolve(200);
})
let p3 = new Promise((resolve, reject)=>{
    reject(300);
})
let p4 = new Promise((resolve, reject)=>{
    reject(400);
})
Promise.all([p1,p2]).then((res)=>{
    console.log(res); // [100, 200]
});
Promise.all([p1,p2,p3,p4]).then(()=>{
},(err)=>{
    console.log(err); // 300
});

Promise.any()

如果数组中有一个Promise的状态为 resolve，那么any()方法的状态就会变为resolve，结果为第一个状态为resolve的Promise的结果，如果数组中所有的 promise的状态都为rejected，那么any()方法的结果为rejected
参数:一个数组，数组的每一项都是一个 promise对象

let p1 = new Promise((resolve, reject)=>{
    reject(100);
})
let p2 = new Promise((resolve, reject)=>{
    resolve(200);
})
let p3 = new Promise((resolve, reject)=>{
    resolve(300);
})
let p4 = new Promise((resolve, reject)=>{
    reject(400);
})
Promise.any([p1,p2,p3]).then((res)=>{
    console.log(res); // 200
});
Promise.any([p1,p2,p3,p4]).then((res)=>{
    console.log(res); // 200
});

Promise.finally()

不管Promise的状态是什么都会执行的操作，其他用法同 then方法

let p = new Promise((resolve, reject)=>{
    resolve(100);
})
.then((res)=>{
    console.log(res); // 100
})
.finally(()=>{
    console.log('end'); // end
})
.then(()=>{
    console.log('aaaaa'); // aaaaa
})
.finally(()=>{
    console.log('end'); // end
    return new Promise((resolve, reject)=>{
        reject(10000);
    })
})
.catch((value)=>{
    console.log(value); // 10000
})
.finally(()=>{
    console.log('end'); // end
})

Promise.race()

race的状态为数组中第一个状态发生改变的Promise的状态，结果为这个Promise的结果

let p1 = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve(100);
    }, 1000);
})
let p2 = new Promise((resolve, reject)=>{
    resolve(200);
})
let p3 = new Promise((resolve, reject)=>{
    reject(300);
})
Promise.race([p1,p2,p3]).then((res)=>{
    console.log(res); // 200
})