JavaScript-Promise

JavaScript中Promise对象用来传递异步操作的消息。

生命周期

Promise共有两种生命周期：

1、pending（进行中）-此时代码执行尚未结束

2、settled（已处理）-代码执行结束。settled又分为两种情况：

（1）fulfilled（已完成）-异步代码执行成功

（2）rejected（已拒绝）-异步代码执行失败

创建未处理的Promise

new Promise(
    (resolve,reject)=>{}
);

resolve、reject：JavaScript提供的两个回调函数，用于在代码中指定结束状态

resolve(value) - 设定任务完成（fulfilled），并返回结果value（可选）

reject(error) - 设定任务失败（rejected），并返回错误error（可选）

注意：new Promise()立即执行

消费Promise

//接收一到两个函数为参数，第一个参数在Promise对象resolved后执行，第二个在rejected后执行
promise.then(resolve,reject)
//接收一个对象作为参数，在Promise对象rejected后执行，相当于promise.then(null,reject)
promise.catch(reject)

每次调用then/catch都会创建一个新任务，返回新的Promise对象

创建已处理的Promise

//返回完成态Promise
Promise.resolve(val)
//返回拒绝态Promise
Promise.reject(err)

let promise=Promise.resolve('finished');
promise.then(
    result=>console.log(result) //打印finished
);

let promise2=Promise.reject('error');
promise2.catch(
    reject=>console.error(reject) //打印error
);

Promise链

promise.finally(fn)：接收一个函数作为参数，无论成功与否都会执行该函数，且在执行完成后结束promise。一般用于放在最后执行清理任务。

new Promise( (resolve,reject)=>resolve(1) )
.then( (val)=>{console.log(val); return 2;} )
.then( (val)=>{console.log(val); throw new Error('err');} )
.catch( (err)=>{console.log(err); return 3;} )
.then( (val)=>console.log(val) )
.finally( ()=>console.log('finished') )

批量操作Promise对象

/**
*接收⼀个包含多个Promise对象的数组，等待所有都完成时，返回存放它们结果的数组。如
*果任⼀被拒绝，则⽴即抛出错误，其他已完成的结果会被忽略
**/
Promise.all(promises)

/**
*接收⼀个包含多个Promise对象的数组，等待所有都已完成或已拒绝时，返回存放它们结果
*对象的数组。每个结果对象的结构为 {status:‘fulfilled’,value}或{status:‘rejected’,reason}
**/
Promise.allSettled(promises)

/**
*接收⼀个包含多个Promise对象的数组，等待第⼀个有结果（完成/拒绝）的Promise，并把
*其 result/error 作为结果返回
**/
Promise.race(promises)

Async/Await

通过async/await，可以把链式调用优化成更适合日常逻辑的写法。

Async

async可加在函数前作为修饰符，该函数默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。

Await

理解为async wait，放在async修饰的函数内作为修饰符。await会暂停函数执行，直到promise完成并返回结果。

await修饰的若是Promise对象，则获取到的是Promise中返回的内容，即resolve或reject的参数。且取到值后语句才会往下执行；若不是Promise对象，则会把这个东西当作await表达式的结果。

function counter(n){
    return new Promise(
        (resolve,reject)=>resolve(n+1)
    );
}
function adder(a,b){
    return new Promise(
        (resolve,reject)=>resolve(a+b)
    );
}
function delay(a){
    return new Promise(
        (resolve,reject)=>setTimeout( ()=>resolve(a),1000 )
    );
}

//链式调用写法
function callAll(){
    counter(1)
    .then( val=>adder(val,3) )
    .then( val=>delay(val) )
    .then( val=>console.log(val) );
}
callAll(); //打印5

//async/await写法
async function callAll1(){
    const count=await counter(1);
    const add=await adder(count,3);
    //const delay=await delay(add);
    console.log(await delay(add));
}
callAll1(); //打印5