寒假学习记录1：Promise

目录

promise A+ 规定：

catch方法

promise的链式调用（例题和我自己对于promise的理解）

Promise的静态方法

async

await

async/await用例

promise A+ 规定：

????????1.所有的异步场景，都可以看作是一个异步任务，每个异步任务，在JS中应该表现为一个对象，该对象称之为promise对象，也叫做任务对象

????????2.每个任务对象，都应该有两个阶段，三个状态（执行后只能是完成或失败一种状态）

????????????????????????未决阶段（unsettled）? ? ?已决阶段（settled）

????????????????????????挂起状态（pending） --> 完成状态（fulfilled）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?或 失败状态（rejected）

????????????????根据常理，它们之间存在以下逻辑

????????????????????????1.任务总是从未决阶段变到已决阶段，无法逆行

????????????????????????2.任务总是从挂起状态编导完成或失败状态，无法逆行

????????????????????????3.时间不能倒流，历史不可改写，任务一旦完成或失败，状态就固定下来，永远无法改变

????????3.挂起->完成，称之为resolve；挂起->失败，称之为reject。任务完成时，可能有一个相关数据；任务失败时，可能有一个失败原因

????????????????????????未决阶段（unsettled） ???????????????????????????已决阶段（settled）

????????????????????????挂起状态（pending） --resolve(data)--> 完成状态（fulfilled）+ data

???????????????????????????????????????????????????????????--reject(reason)--> 失败状态（rejected）+ data

????????4.可以针对任务进行后续处理，针对完成状态的后续处理称之为onFulfilled，针对失败的后续处理称之为onRejected

??????未决阶段（unsettled）? ? ? ? ? ? ? ? ? ? ? ? ? ? 已决阶段（settled）

??????挂起状态（pending） --resolve(data)--> 完成状态（fulfilled）+ data --> data+onFulfilled

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?--reject(reason)--> 失败状态（rejected）+ data --> reason+onRejected

———————————————————————————————————————————

例：

const pro = new Promise((resolve,reject)=>{		//挂载两个函数，成功与失败
    console.log("开始百米短跑");
    const duration = Math.floor(Math.random()*5000);
    setTimeout(()=>{
        if(Math.random()<0.5){
            resolve(duration);  //成功的话
        }
        else{
            reject("脚扭伤了");  //失败的话
        }
    }, duration);
});
pro.then(
    (data)=>{
        console.log("跑完了");		//成功的话执行这里
    },(reason)=>{
        console.log("没跑完");		//失败的话执行这里
    }
)
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
//或
function a(){
    return new Promise((。。。,。。。)=>{。。。})
}
a.then(()=>{},()=>{})

注意点：

new Promise((resolve,reject)=>{
    resolve(1);
    resolve(2);//这句是无效代码
    reject(3);//这句也同样无效，因为只判断一次状态
})

catch方法

????????.catch(onRejected) = .then(null,onRejected) --->

????????当必失败时，可以使用catch，相当于没有完成态的then

promise的链式调用（例题和我自己对于promise的理解）

????????Promise --> then(判断) --> Promise --> then(判断) --> Promise

????????1. then方法必定会返回一个新的Promise

????????????????可理解为后续处理也是一个任务

????????2. ?新任务的状态取决于后续处理：

????????????????1.若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据

????????????????2.若有后续处理但未执行，新任务挂起。

????????????????3.若后续处理执行了，则根据后续处理的情况决定新任务的状态

????????????????????????1.后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值

????????????????????????2.后续处理执行有错，新任务的状态为失败，数据为异常对象

????????????????????????3.后续执行后返回的是一个任务对象，新任务的状态和数据于该任务对象一致

????????我的理解：执行失败态或完成态取决于前一个Promise的执行情况，或调用情况

练习1

const pro1 = new Promise((resolve,reject)=>{ //优先级2
    setTimeout(()=>{											//执行成功，下次完成态
        resolve(1);//给完成态1传入1
    },1000);
})
const pro2 = pro1.then((data)=>{ //优先级3
    console.log(data);//此时data为1，输出1						//执行成功，下次完成态
    return data + 1;//给完成态2传入2
})
const pro3 = pro2.then((data)=>{//优先级4						  //执行
    console.log(data);//此时data为2，输出2						
})
console.log(pro1,pro2,pro3);//优先级1，此时Promise123还都是运行中，无结果，输出pending
setTimeout(()=>{//优先级5
    console.log(pro1,pro2,pro3);//全部执行完成，pro1为1，pro2为2，pro3没有返回值
},2000)
//答案
//Promise{<pending>} Promise{<pending>} Promise{<pending>}
//1
//2
//Promise{<fulfilled>:1} Promise{<fulfilled>:2} Promise{<fulfilled>:undefined}

练习2

new Promise((resolve , reject)=>{ //优先级1
    resolve(1);	//完成态传入1							 //调用成功态
})
    .then((res)=>{ //优先级2
        console.log(res);//输出1						 //执行成功，下次完成态
        return 2;//完成态传入2
    })
    .catch((err)=>{ //由于没有失败，不执行失败态			//跳过
        return 3;
    })
    .then((res)=>{ //优先级3								//执行
        console.log(res); //输出2
    })
//答案
//1
//2

练习3

new Promise((resolve , reject)=>{ //优先级1
    resolve();											  //调用成功态
})
    .then((res)=>{//执行
        console.log(res.toString());//报错，下一段执行失败态//执行失败，下次失败态
        return 2; //上段报错了，这里不执行
    })
    .catch((err)=>{ //执行
        return 3; //这段成功执行了，下一段执行完成态		  //执行成功，下次成功态
    })
    .then((res)=>{ //执行								  //执行
        console.log(res); //输出3
    })
//答案
//3

练习4

new Promise((resolve , reject)=>{
    throw new Error(1);	//抛出错误1，执行失败态		//执行失败，下次失败态
})
    .then((res)=>{	//不执行
        return new Error("2");						//跳过
    })
    .catch((err)=>{	//执行							//执行失败，下次失败态
        throw err;
    })
    .then((res)=>{	//不执行							//跳过
        console.log(res);
    })
//答案
//抛出错误1

练习5

const pro1 = new Promise((res,rej)=>{
    setTimeout(() => {									//调用失败态
        rej();
    },1000);
})
const pro2 = pro1.catch(()=>{
    return 2;											//返回2
})
console.log(pro1);
console.log(pro2);
setTimeout(()=>{											
    console.log(pro1);
    console.log(pro2);
},2000)
//答案
//Promise {<pending>}
//Promise {<pending>}
//Promise {<rejected>: undefined}
//Promise {<fulfilled>: 2}

Promise的静态方法

????????Promise.resolve(data) --> 直接返回一个完成状态的任务

????????Promise.reject(reason) --> 直接返回一个拒绝状态的任务

????????Promise.all(任务数组) --> 返回一个任务，任务数组全部成功则成功，任何一个失败则失败

????????Promise.any(任务数组) --> 返回一个任务，任务数组任一成功则成功，任务全部失败则失败

????????Promise.allSettled(任务数组) --> 返回一个任务，任务数组全部已决则成功，该任务不会失败

????????Promise.race(任务数组) --> 返回一个任务，任务数组任一已决则已决，状态和其一致

async

????????async关键字用于修饰函数，被它修饰的函数，一定返回Promise

await

????????await关键字表示等待某个Promise完成，它必须用于async函数中

????????await也可以等待其他资源

????????如果需要针对失败的任务进行处理，可以使用try-catch语法

例：

async function method(){
    try{
        const n = await Promise.reject(123);	//执行失败态
        console.log("成功",n);				   //不执行
    }
    catch(err){
        console.log("失败",err)					//执行这里
    }
}
method();

async/await用例

function delay(duration){...}
//原								//改写
delay(1000)					  -->	//(async () => {
	.then(()=>{					    //    for (let i = 0;i<3;i++){
    	console.log("ok");			//        await delay(1000);
    	return delay(1000);			//        console.log("ok");
	})        					    //    }
    .then(()=>{						//})();
    	console.log("ok");
    	return delay(1000);
	})     
    .then(()=>{
    	console.log("ok");
    	return delay(1000);
	})