寒假学习记录1:Promise

发布时间:2024年01月20日

目录

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);
	})
 

文章来源:https://blog.csdn.net/m0_53785610/article/details/135708355
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。