版权声明
- 本文原创作者:清风不渡
- 博客地址:https://blog.csdn.net/WXKKang
重拾前端记忆,记录学习笔记,现在进入Async函数部分
一、Async函数
1、定义
ES2017标准引入了Async函数,使得异步操作变得更加方便,它可以将异步操作变为同步操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清风不渡</title>
</head>
<body>
<script>
function print (){
setTimeout(() => {
console.log("10毫秒定时器");
}, 10);
console.log("Hello");
}
print();
function timeOut (ms){
const promise = new Promise(function(resolve,reject){
setTimeout(() => {
console.log(ms+"毫秒定时器");
resolve();
}, ms);
})
return promise;
}
async function print1(ms,value) {
//在具有异步操作的代码前插入 await
await timeOut(ms);
console.log(value);
}
print1(200,"hello");
</script>
</body>
</html>
结果如下:
可以看到,由于是异步操作,所以在未加Async函数之前是先执行的定时器之后的代码,后执行定时器内的代码
而加了Async函数之后,是等待定时器执行结束之后才执行的下面代码
这样子做的意义在于,当我们希望先执行异步操作后再执行下方代码时(例如多个网络请求有关联关系),可通过此函数实现