javascript红宝书学习(四)期约与异步函数

137 阅读3分钟

理解和学习期约

学习参考:juejin.cn/post/704007…
期约一共有三个状态“待定(pending),兑现(fulfilled || resolved),拒绝(rejected)”

// 正常创建对象的情况下,状态为待定
let p = new Promise(()=>{})
setTimeout(console.log,o,p); // [[PromiseState]]: "pending"
// 兑现状态是可以设置的,调用resolve()方法
let p = new Promise((resolve,reject) =>{resolve()});
setTimeout(console.log,0,p); // [[PromiseState]]: "fulfilled"
// 拒绝一样,并且会抛错
let p2 = new Promise((resolve,reject) =>{reject()});
// Uncaught error (in promise)
setTimeout(console.log,0,p2); // [[PromiseState]]: "rejected"

Promise.prototype.then的学习

then方法包含两个参数onResolved 处理程序和 onRejected 处理程序
then是Promise的特有方法,用来回调Promise的两种私有状态

let p = new Promise((resolve,rejece) =>{
	setTimeout(() =>{
		//resolve("success");
		rejece("fail");
	},1000)
})
p.then(function(res){
	console.log("成功回调"+res);   // 当执行resolve("success");会进入该方法
},function(error){
	console.log("失败回调"+error); // 当执行rejece("fail"); 会进入该方法
})

只有操作then就会返回新的Promise对象,一般有三种请求
1,当then操作没有返回值时:PromiseResult:为undefined,PromiseState为fulfilled
2,当then操作有返回值时:PromiseResult展示返回值内容,PromiseState为fulfilled
3,当then操作返回一个new Promise对象时,PromiseResult:为undefined,PromiseState为fulfilled
4,通过以上三点可以得知每次访问then时会返回一个新的Promise对象,并且每个对象都是存在then方法的,也就是说可以无限循环访问then方法

let p = new Promise((resolve,rejece) =>{
	setTimeout(() =>{
		resolve("success");
		//rejece("fail");
	},1000)
})
p.then(function(res){
	console.log("成功回调"+res); //返回成功回调success
}).then(function(res){
	console.log("成功回调2"+res); // 当第一个then没进行return时,则返回为undefined(成功回调2undefined)
})

Promise.prototype.catch()

catch用来处理异常请求,用于发生错误的回调,其实和.then(null,onRejected)和.then(undefined,onRejected)一个意思

let p = new Promise((resolve,rejece) =>{
	setTimeout(() =>{
		//resolve("success");
		rejece("fail");
	},1000)
});
// 以下三种的返回是相等的
p.then(null,error =>{
	console.log(error); // fail
});
p.then(undefined,error =>{
	console.log(error); // fail
});
p.catch(error =>{
	console.log(error); // fail
})

Promise.prototype.finally

同理了,就是一定要执行的内容,没啥可说的

Promise.all() 和 Promise.race()

1,Promise.all():将所有的内容整合
2,Promise.race():返回最先执行完的Promise的方法

let p = new Promise((resolve,rejece) =>{
	setTimeout(() =>{
		//resolve("success1");
		rejece("fail1");
	},2000)
});
let p2 = new Promise((resolve,rejece) =>{
	setTimeout(() =>{
		resolve("success2");
		//rejece("fail2");
	},1000)
});
let p3 = new Promise((resolve,rejece) =>{
	setTimeout(() =>{
		resolve("success3");
		//rejece("fail3");
	},1000)
});	
let p4 = Promise.all([p,p2,p3])
console.log(p4); // 当出现失败的返回,永远返回失败的对象,当全部成功,则返回一个Array数组(包含三个对象)
let p5 = Promise.race([p,p2,p3]);
console.log(p5); // 返回p2的对象,因为他最快

ES8 async/await 异步函数

其实,async/await 是Promise的语法糖,并且await只能在async出现的情况下使用,要不然会报错。
1,async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。
2,await当前方法必须要有async 3,async和await只是进一步优化.then的地狱循环嵌套问题的

function takeLongTime(n){
	return new Promise(resolve => { setTimeout(() => resolve(n + 200), n); })
}
function step1(n) { 
	console.log(`step1 with ${n}`); 
	return takeLongTime(n);
}
function step2(n) { 
	console.log(`step2 with ${n}`); 
	return takeLongTime(n);
}
function step3(n) { 
	console.log(`step3 with ${n}`); 
	return takeLongTime(n);
}

async function test(){
	let p1 = 300;
	step1(p1).then(res => step2(res)).then(t2 => step3(t2)).then(result =>{console.log(result)}); // 这个方法执行的结果其实是解决地狱循环函数的等同于下面的执行结果,可知,执行后的结果更简介
	let t1 = await step1(p1); // 利用await获取对应Promise的值,但是方法体上必须要有async
	let t2 = await step2(t1);
	let t3 = await step3(t2);
	console.log(t3);
}