async函数(源自ES2017)
概念:
真正意义上去解决异步回调的问题,用用同步流程来表达异步操作
本质:
Generator函数的语法糖
语法:
async function foo (){ await 异步操作 await 异步操作 }
特点:
1、不需要向Generator函数去调用next()方法,而是遇到await就等待,直到当前异步操作完成就继续往下执行
2、返回的总是Promise对象,可以使用then()方法进行下一步操作
3、async函数取代Generator函数的*,await函数取代Generator函数的yield
4、语意上更为明确,使用简单,经验证,暂时没有任何副作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>async函数</title>
</head>
<body>
<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
async function fun() {
return new Promise(resolve => {
/*setTimeout(function () {
resolve()
},2000)*/
//可以简写为:
setTimeout(resolve,2000)
})
}
async function test1() {
console.log('开始执行' + new Date().toTimeString()) // 开始执行12:30:20 GMT+0800 (中国标准时间)
await fun()
console.log('结束执行' + new Date().toTimeString()) // 结束执行12:37:11 GMT+0800 (中国标准时间)
}
test1()
//async函数里await的返回值默认是undefined
function test2() {
return 'xxx'
}
async function asyncPrint() {
let result1 = await test2() // await后面调用普通的函数,返回值就是普通函数的返回值
console.log(result1) // xxx
let result2 = await Promise.resolve('成功了') // await后面调用Promise构造函数的resolve成功方法可以传入参数
console.log(result2) // 成功了
//let result3 = await Promise.reject('失败了') // await后面调用Promise构造函数的reject失败方法会报错,但也可以传入参数
//console.log(result3)
}
asyncPrint()
//先后获取新闻内容及评论的需求:
async function getNews(url) {
return new Promise((resolve,reject) => {
$.ajax({
method:'GET',
url, // 这里用到了ES6简化对象的写法
/*success:function (data) {
resolve()
},
error:function (error) {
reject()
}*/
//上面可以简写为:
success:data => resolve(data),
error:error => resolve(false) // !!!注意:async函数使用技巧:发送状态不成功也进成功的状态内,携带一个标识值,后续判断直接返回来
})
})
}
async function sendXml() {
let result = await getNews('http://localhost:3000/news?id=3')
console.log(result) // {id: "3", title: "news title1...", content: "news content1...", commentsUrl: "/comments?newsId=3"}
if(!result){
alert('暂时没有新闻内容')
return
}
result = await getNews('http://localhost:3000' + result.commentsUrl)
console.log(result) // (2) [{…}, {…}]
if(!result){
alert('暂时没有评论内容')
return
}
}
sendXml()
</script>
</body>
</html>