ES6参考---async函数（es7）
一、总结
一句话总结：
async函数 是ES2017的内容，也是解决异步问题的，也是同步流程表达异步操作，本质是Generator函数的语法糖
async function foo(){
await 异步操作;
await 异步操作；
}
1、async函数 的本质？
async函数的本质是Generator的语法糖
2、async函数 的语法？
function前面加上async，函数中的异步操作前面加上await，表示前面的异步操作做完了还会做下面的异步操作
async function foo(){
await 异步操作;
await 异步操作；
}
3、async函数 的特点？
a、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
b、async取代Generator函数的星号*，await取代Generator的yield
4、async函数 异步使用实例？
在函数前面加了async标注异步，具体ajax调用函数前面加上了await：await sendXml(url)
// 案例演示 async function sendXml(url) { return new Promise((resolve, reject) => { $.ajax({ url, type: 'GET', success: data => resolve(data), error: error => reject(error) }) }) } async function getNews(url) { let result = await sendXml(url); let result2 = await sendXml(url); console.log(result, result2); } getNews('http://localhost:3000/news?id=2')
二、async函数（es7）
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>async函数</title> 6 </head> 7 <body> 8 9 <!-- 10 async函数(源自ES2017) 11 概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作 12 本质： Generator的语法糖 13 语法： 14 async function foo(){ 15 await 异步操作; 16 await 异步操作； 17 } 18 特点： 19 1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行 20 2、返回的总是Promise对象，可以用then方法进行下一步操作 21 3、async取代Generator函数的星号*，await取代Generator的yield 22 4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用 23 24 --> 25 <script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script> 26 <script type="text/javascript"> 27 async function timeout(ms) { 28 return new Promise(resolve => { 29 setTimeout(resolve, ms); 30 }) 31 } 32 33 async function asyncPrint(value, ms) { 34 console.log('函数执行', new Date().toTimeString()); 35 await timeout(ms); 36 console.log('延时时间', new Date().toTimeString()); 37 console.log(value); 38 } 39 40 console.log(asyncPrint('hello async', 2000)); 41 42 // await 43 async function awaitTest() { 44 let result = await Promise.resolve('执行成功'); 45 console.log(result); 46 let result2 = await Promise.reject('执行失败'); 47 console.log(result2); 48 let result3 = await Promise.resolve('还想执行一次');// 执行不了 49 console.log(result3); 50 } 51 awaitTest(); 52 53 54 // 案例演示 55 async function sendXml(url) { 56 return new Promise((resolve, reject) => { 57 $.ajax({ 58 url, 59 type: 'GET', 60 success: data => resolve(data), 61 error: error => reject(error) 62 }) 63 }) 64 } 65 66 async function getNews(url) { 67 let result = await sendXml(url); 68 let result2 = await sendXml(url); 69 console.log(result, result2); 70 } 71 getNews('http://localhost:3000/news?id=2') 72 73 </script> 74 75 </body> 76 </html>