async函数(源自ES2017)
概念: 真正意义上去解决异步回调的问题,同步流程表达异步操作
本质: Generator的语法糖
语法:
async function foo(){
await 异步操作;
await 异步操作;
}
特点:
1、不需要像Generator去调用next方法,遇到await等待,当前的异步操作完成就往下执行
2、返回的总是Promise对象,可以用then方法进行下一步操作
3、async取代Generator函数的星号*,await取代Generator的yield
4、语意上更为明确,使用简单,经临床验证,暂时没有任何副作用
<script type="text/javascript">
async function timeout(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
})
}
async function asyncPrint(value, ms) {
console.log('函数执行', new Date().toTimeString());
await timeout(ms);
console.log('延时时间', new Date().toTimeString());
console.log(value);
}
console.log(asyncPrint('hello async', 2000));
// await
async function awaitTest() {
let result = await Promise.resolve('执行成功');
console.log(result);
let result2 = await Promise.reject('执行失败');
console.log(result2);
let result3 = await Promise.resolve('还想执行一次');// 执行不了
console.log(result3);
}
awaitTest();
// 案例演示
async function sendXml(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
type: 'GET',
success: data => resolve(data),
error: error => reject(false)
})
})
}
async function getNews(url) {
let result = await sendXml(url);
if(!result){
alert('错误')
return
}
let result2 = await sendXml(url);
console.log(result, result2);
}
getNews('http://localhost:3000/news?id=2')
</script>
网友评论