建议收藏!async ,await相关知识总结,适用于js基础不错的童鞋

2024-01-05 21:30:58

早在很久之前就知道async和awiat的大名了,但我却一直对这个东西也算是不温不火吧;
最近在搞koa的时候大量出现的 async和await把我搞得有点烦了;
我就单独抽出来半天时间好好来解决下整个async和await
可能有的童鞋知道他是基于es6的promise基础上进行扩展了;
在讲解之前我们就来谈谈 promise的由来的历史吧; 虽然有点废话了但助你理解async的还是有点帮助的.
1.promise的历史
可能会碰见这样的面试会什么会有 promise这个东西,他的存在是为了解决什么的
很多童鞋可能都会说出来是来解决回调地狱的问题那么问题来了能详细谈一谈什么是回调地狱呢;
当然这个问题对于一些很厉害的童鞋也不算什么问题,
这里我要说一个他的另一个由来的原因
在很久很久之前的
我们在一个函数内部如果有异步函数的话怎么获取到异步函数里面的变量呢
可能手快的童鞋就直接在异步函数中进行了 return 但是真的能拿到吗？

function test(){
	setTimeout(()=>{
		return "hello world"
	},1000)
}
console.log(text())  // undefined

上面的原因是由于函数内部立即执行完毕并不会等待异步函数的执行完毕在同步那块什么都没有返回东西打印当然是 undefined
那我们怎么拿到异步里面执行的变量呢
// 以前的程序员的解决方法就是使用回调函数

function test(callback){
	setTimeout(()=>{
		callback("hello world")
	},1000)
}
test(function(msg){console.log(msg);});

上面的程序其实可以看成下面的这种情况

function test(callback){
	setTimeout(()=>{
		callback("hello world")
	},1000)
}
var callback=function(msg){
	console.log(msg)
}
test(callback)

但问题是如果工作中也想这么简单就好了前端的同行都知道经常要和服务器进行ajax交流
但是交流就交流吧还经常下一个ajax交流的参数依赖上一个ajax交流的结果
这就形成了嵌套问题是有的时候套一层还不够还得套好几层这就产生了回调地狱的问题了
这个时候promise就诞生了
我们这里使用promise将上面的程序进行修改下

function test(){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve("hello world");
		},1000)
	})
	
}
test().then(res=>{console.log(res)}) // 输出 hello world

是不是看起来就有那么一丝感觉了是吧
函数体内部返回一个new promise函数
在函数执行后有一个.then方法　来接收　执行成功的　内部　
我们可以把变量放到 resolve() 里面作为参数在 .then中用来接收
但是　promise 我就不在这里细讲了可以去看看阮一峰老师的 es6
2.async 和await
在学习async和await 之前不要把它当做一个新知识来说
他不过是我们之前学过的东西穿上了一层新的衣服首先内心上就不够对他产生恐惧
官方解释一大堆专业名词 ,那就不要去看了 ,越看越迷惑
通俗的讲解就是就是将你的异步代码看起来更像是同步不要将它想的太高大上

我依次举几个例子你们可能就懂了
1.函数前面加上 async 之后函数返回一个 promise对象

async function test(){
	console.log(111);
}
console.log(test());

如果函数里面没有返回数据的话就是在promise 后面就是一个undefined
2.带返回值的函数

async function test(){
	return "111";
}
console.log(test());

那我们怎么拿到那个返回值呢
聪明的童鞋可能就想到了既然是promise对象那就按照promise的那种方式拿呗
bingo clever!

async function test(){
	return "111";
}
test().then(res=>{console.log(res)}); // 输出 111

3.在没有 await 关键字之前不要把sync 当做异步看待他里面的执行体只要不是异步代码和同步带吗一视同仁
按照正常顺序走就是了

async function test(){
	console.log(111);
}
test();
console.log(2222);

4.await 关键字
记住了await必须只能在　前面有async 的函数体内否则报错
这里先举一个正常点的例子吧
这里可以先暂停下知道点await的童鞋可以先去标注下下面的输出顺序

function func(){
	return new Promise((resolve)=>{
		setTimeout(()=>{
			console.log(111);
			resolve('222');
		},3000)
	})
}
async function test(){
	var n=await func();
	console.log(n);
	 console.log(333);
}
test();
console.log(444);
// 答案 : 1.444  2.111  3.222   4.333

这个await 要关键进行讲解了
await 后面要等待的函数对象有两种1，返回promise 2.不返回promise的
这两者之前下面又分为返回的是同步还是异步有没有返回值下面都进行讲解
有一个很重要的一点就是不管上面得是那种情况 await 都会阻塞它下面代码的执行

4.1 先说下不返回promise的函数对象吧且是同步的代码没有返回值
// await 会阻塞下面的代码执行先执行函数外面的同步代码
所以下面的输出顺序是 111 333 222

function func(){
	console.log(111);
}
async function test(){
	await func();
	console.log(222);
}
test();
console.log(333);

4.2 await 不返回promise对象的函数对象吧且是同步的代码有返回值的
await 是代码从右向左执行的左边的函数执行完之后有返回值复制给 n
下面代码的执行顺序是 333 111 222

function func(){
	return "111";
}
async function test(){
	var n=await func();
	console.log(n);
	console.log(222);
}
test();
console.log(333);

4.3 await 不返回promise对象的函数对象吧且是异步的代码没有返回值的
还是要记住 await 会阻塞后面代码的执行先执行外边的同步代码
下面函数的执行顺序是 111 444 333 222

function func(){
	console.log(111);
	setTimeout(()=>{
		console.log(222);
	},1000)
}
async function test(){
	await func();
	console.log(333);
}
test();
console.log(444);

这里可能有的童鞋纳闷了不是阻塞后面代码的执行先执行完await 后面的函数么
这里确实执行完了看见那个 111 是先打印的
但是后面有一个异步函数它自然要进入异步的事件队列里面等待定时事件走完他就要执行了
所以这下自然人家后面的 333 就要执行了
awati 是让代码看起来像是同步的并不是代码走的也变成同步阻塞了哈

4.4 await 不返回promise对象的函数对象吧且是异步的代码有返回值的(迷惑人呢)
下面的输出自然就是 // 111 444 undefined 333
func 执行完了没有返回值自然是对的就是undefined了
那个说人家异步函数里面有返回值的那个func函数都执行完了这个值是拿不到外边
要想拿到就看下面的promise吧

function func(){
	console.log(111);
	setTimeout(()=>{
		return "222";
	},1000)
}
async function test(){
	var n=await func();
	console.log(n);
	console.log(333);
}
test();
console.log(444);

4.5 await 返回promise对象的函数对象吧且不是异步的代码没有返回值的
这里输出的顺序就是 111 333
这里可能纳闷为啥子没有 222
要记牢如果返回的是promise对象的话没有返回值
await 等不到返回值的话下面的代码他就不执行了记住这点哦童鞋们

function func(){
	return new Promise((resolve,reject)=>{
		console.log(111);
	})
}
async function test(){
	await func();
	console.log(222);
}
test();
console.log(333);

4.6 await 返回promise对象的函数对象吧且是异步的代码没有返回值的
// 下面代码的输出顺序是 333 111
同样没有收到返回值直接不执行下面的 console.log(222)了

function func(){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			console.log(111);
		},100)
	})
}
async function test(){
	await func();
	console.log(222);
}
test();
console.log(333);

4.7 await 返回promise对象的函数对象吧且不是异步的代码有返回值的
// 下面的执行顺序是 111 444 222 333

function func(){
	return new Promise((resolve,reject)=>{
		console.log(111);
		resolve(222);
	})
}
async function test(){
	var n=await func();
	console.log(n);
	console.log(333);
}
test();
console.log(444);

4.8 await 返回promise对象的函数对象吧且是异步的代码有返回值的
下面代码的执行顺序是 111 444 222 333
await 知道返回的是promise 它要拿到返回的值赋值给 n 所以就是打印出来这个顺序了

function func(){
	return new Promise((resolve,reject)=>{
		console.log(111);
		setTimeout(()=>{
			resolve(222);
		},1000)
	})
}
async function test(){
	var n=await func();
	console.log(n);
	console.log(333);
}
test();
console.log(444);

这下应该就明白
最后附上一到async 和await的经典面试题

async function async1(){
    console.log('async1 start') 
    await async2()
    console.log('async1 end')  
}
async function async2(){
    console.log('async2')  
}
console.log('script start'); 
setTimeout(function(){
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1') 
    resolve();
}).then(function(){
    console.log('promise2') 
})
console.log('script end')

码农公寓

相关文章