ES7的async和await_es7 async-优快云博客

本文链接：https://blog.youkuaiyun.com/yuxingwu9872/article/details/137293683

本文介绍了ES7中引入的async/await特性，如何用类似同步的方式编写异步代码，以及其与Promise和Generator的关系，包括如何正确使用await和封装Promise函数的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES7的async和await

ES6中的Promise对象, 解决了回调黑洞, 但实际上又产生了火车黑洞, then()过多不好看。

所以ES7中提出了async/await可以让我们用同步的方式写异步, 不写then了。

async表示异步, await表示异步等待, 等待后面的操作执行完毕, 再执行下一行代码。

语法解释：

async function fun(){
return "Hello World!";
}
console.log(fun()); // Promise { 'Hello World!' }

用写同步的方法, 写异步函数要注意：

必须写那个return Promise对象的函数；

await必须写在async关键字的函数中；

所有异步语句前都要加await, 但是后面的异步函数必须是return Promise实例的函数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button>请求数据</button>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function duwenjian(url){
return new Promise(function(resolve, reject){
$.ajax({
url: url,
success: function(data){
resolve(data)
},
error: function(err){
reject(err)
}
})
})
}
// async帮我们返回了一个Promise实例
// async function fun(){
// return "Hello world！"
// }
// console.log(fun())
$('button').click(async function(){
var data1 = await duwenjian("data/1.json")
var data2 = await duwenjian("data/2.json")
var data3 = await duwenjian("data/3.json")
console.log(data1)
console.log(data2)
console.log(data3)
});
</script>
</html>

Nodejs读文件：

var fs = require("fs");
function duwenjian(url){
return new Promise(function(resolve,reject){
fs.readFile(url,"utf8", (err,data)=>{
if(err){
reject(err); //失败执行
return;
}
resolve(data); //成功执行
})
})
}
async function main(){
var data1 = await duwenjian("data/1.txt").then(data=>data);
var data2 = await duwenjian("data/2.txt").then(data=>data);
var data3 = await duwenjian("data/3.txt").then(data=>data);
console.log(data1)
console.log(data2)
console.log(data3)
};
main();

总结：

使用async/await的哲学：用写同步语句的感觉, 去写异步语句。

ES7引入async函数, 是为了使异步操作更加方便, 其实它就是Generator函数的语法糖。

任何一个函数都可以在function前面async这个关键字, 表示这个是返回promise的异步函数。

await后面只能跟着一个返回promise对象的实例的函数的调用, then函数可以有返回值。

如果不封装Promise函数就要像以下这样用

async function fun(){
const promise = new Promise((resolve,reject) => {
setTimeout(() => resolve('Hello World!'), 2000)
})
const error = false; // 错误信息
if(!error){
// 等待resolve执行完毕后，才会执行
return await promise;
}else{
await Promise.reject(new Error("报错了!"));
}
}
fun()
.then(data => console.log(data))
.catch(err => console.log(err));