微信扫一扫打赏支持

ES6参考---async函数（es7）

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>

 

 

 

 
posted @ 2020-03-28 20:56  范仁义  阅读(190)  评论(0)  编辑  收藏  举报