async/await

async await

我们直接进入主题!!!

 

1.async和await是什么?

        async:
            是ES7语法,用于声明一个function是异步函数。
        await:
            等待一个异步方法完成。
    ps:await只能出现在async函数中,不然会报错,如示例1-1;
        Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
        Await只在异步函数和*模块体中有效.

  

  

 1 /*示例 1-1*/
 2     let fun = function (){
 3         console.log(‘错误示例‘);
 4     }
 5     await fun();
 6 
 7     let fun1 = function(){
 8         console.log(‘正确示例‘);
 9     }
10     let fun =async function (){
11         await fun1();
12     }
13     fun();

  

2.async到底干了什么?
       (一):
        我们先看一下async声明的函数,返回值到底是个什么。
    ps:如示例2-1;
        可以看到返回的其实就是一个promise对象。Promise {<fulfilled>: "async"}
        所以,async直接返回一个promise对象。如果在函数中直接return一个直接量,async会通过promise.resolve()封装成promise对象。
    ps:Promise.resolve(e)可以看作是 new Promise(resolve => resplve(e))的简写,可以快速将字面量对象或其他对象分装成promise实例。
        (二):
        使用async不用await可以处理返回值吗?
    ps:如示例2-2-1;
        如示例2-2-2,async声明的函数是一个promise对象,所以我们当然可以用then()链去处理。
        (三):
        到这里就会产生一个疑问,既然async返回是一个promise对象,并且promise的特点就是无等待,在没有await的情况下会立即执行,不会阻塞后面的语句,和普通的promise并无二致,
        我们为什么要用async和await呢?

        我们看示例2-3-1,模拟了一个异步操作,因为promise并不会造成阻塞,所以打印2输出为null,打印1会在一秒以后输出111,
        想一个问题如果我们有的代码是基于异步完成之后的结果,要怎么处理?对,我们可以在then()函数中写,如果有多个promise并且相互依赖呢?

  

 1     /*示例2-1*/
 2 
 3     let fun = async function(){
 4         return ‘async‘;
 5     }
 6     console.log(fun());//Promise {<fulfilled>: "async"}
 7 
 8     /*示例2-2-1*/
 9     fun().then(e=>{
10         console.log(e);//async
11     })
12 
13     /*示例2-3-1*/
14     var param = null;
15 
16     let fun =  () => {
17         return new Promise(resolve => {
18             setTimeout(() => resolve(function(){
19                 param = ‘111‘;
20             }), 1000);
21         });
22     }
23 
24     fun().then(v => {
25         v();
26         console.log(param,‘1‘);
27     });
28     console.log(param,‘2‘);
3.await到底在等什么?
        (一):
        官方介绍,await等待的是一个promise对象或者是其它值。
        实际await等待的是一个返回值,所以await后边可以接普通函数,或者是直接量。
    ps:如示例3-1-1。
        (二):
        await等到了要等的东西,然后呢?
        await是一个运算符,用于组成表达式,await表达式的运算结果取决于等到的东西。
        如果await等到的不是一个promise对象,那await运算结果就是等到的东西。
        如果await等到的是一个promise对象,那会阻塞后面的代码,等着promise对象resolve,然后得到resolve的值,最为await运算结果。
        注意:
            阻塞,只是async把所有的阻塞都封装在一个promise对象中异步执行,这也是await必须使用在async函数中的原因。
    ps:如示例3-2-1。
        示例会先执行打印3 输出null,然后一秒以后异步结束执行1,2。

  

 1     /*示例3-1-1*/
 2     let fun = function () {
 3         return "fun";
 4     }
 5 
 6     let asyncFun = async function () {
 7         return Promise.resolve("asyncFun");
 8     }
 9 
10     async function test() {
11         const v1 = await fun();
12         const v2 = await asyncFun();
13         console.log(v1, v2);
14     }
15 
16     test();
17     /*示例3-2-1*/
18     var param = null;
19 
20     let fun = () => {
21         return new Promise(resolve => {
22             setTimeout(() => resolve(function () {
23                 param = ‘111‘;
24             }), 1000);
25         });
26     }
27 
28     let awaitFun = async function () {
29         await fun().then(v => {
30             v();
31             console.log(param, ‘1‘);
32         });
33         console.log(param, ‘2‘);
34     }
35     awaitFun();
36     console.log(param, ‘3‘);
4.目前看来使用Promise和async,await好像并没有什么区别?
        (一):
        我们简单做一个比较。
        不用async/await:
    ps:示例4-1-1。
        使用async/await:
    ps:示例4-1-2。
        好,我们发现好像并没有什么区别?so,优势到底在哪里?
        (二):
        async/await优势:
        其实单一的promise并不能发现async/await优势,但是如果处理多个优势就出来了。
        说白了async/await好像就是用来优化promise。
        现在,我们假设一个业务,分成多步,且每一步都依赖于上一步的结果。
    ps:示例4-2-1。
        有没有发现什么???
        在看一个,把业务要求改一下,仍然是三个步骤,但每一个步骤都需要之前每个步骤的结果。
    ps:示例4-2-2。
        哇,是不是很神奇!!!
  1     /*示例4-1-1*/
  2     let fun = function () {
  3         return new Promise(resolve => {
  4             setTimeout(() => resolve("not async/await!!!"), 1000);
  5         });
  6     }
  7 
  8     fun().then(v => {
  9         console.log("async", v);
 10     });
 11     /*示例4-1-2*/
 12     let fun = function () {
 13         return new Promise(resolve => {
 14             setTimeout(() => resolve("is async/await!!!"), 1000);
 15         });
 16     }
 17 
 18     async function test() {
 19         const v = await fun();
 20         console.log(v);
 21     }
 22 
 23     test();
 24 
 25     /*示例4-2-1*/
 26     /**
 27      * 传入参数 n,表示这个函数执行的时间(毫秒)
 28      * 执行的结果是 n + 200,这个值将用于下一步骤
 29      */
 30     function getTime(n) {
 31         return new Promise(resolve => {
 32             setTimeout(() => resolve(n + 200), n);
 33         });
 34     }
 35 
 36     function step1(n) {
 37         console.log(`step1 with ${n}`);
 38         return getTime(n);
 39     }
 40 
 41     function step2(n) {
 42         console.log(`step2 with ${n}`);
 43         return getTime(n);
 44     }
 45 
 46     function step3(n) {
 47         console.log(`step3 with ${n}`);
 48         return getTime(n);
 49     }
 50     /*promise实现*/
 51     function doIt() {
 52         console.time("doIt");
 53         const time1 = 300;
 54         step1(time1)
 55             .then(time2 => step2(time2))
 56             .then(time3 => step3(time3))
 57             .then(result => {
 58                 console.log(`result is ${result}`);
 59                 console.timeEnd("doIt");
 60             });
 61     }
 62 
 63     doIt();
 64     /*async/await实现*/
 65     async function doIt() {
 66         console.time("doIt");
 67         const time1 = 300;
 68         const time2 = await step1(time1);
 69         const time3 = await step2(time2);
 70         const result = await step3(time3);
 71         console.log(`result is ${result}`);
 72         console.timeEnd("doIt");
 73     }
 74 
 75     doIt();
 76 
 77     /*4-2-2*/
 78     function step1(n) {
 79         console.log(`step1 with ${n}`);
 80         return getTime(n);
 81     }
 82 
 83     function step2(m, n) {
 84         console.log(`step2 with ${m} and ${n}`);
 85         return getTime(m + n);
 86     }
 87 
 88     function step3(k, m, n) {
 89         console.log(`step3 with ${k}, ${m} and ${n}`);
 90         return getTime(k + m + n);
 91     }
 92     /*async/await实现*/
 93     async function doIt() {
 94         console.time("doIt");
 95         const time1 = 300;
 96         const time2 = await step1(time1);
 97         const time3 = await step2(time1, time2);
 98         const result = await step3(time1, time2, time3);
 99         console.log(`result is ${result}`);
100         console.timeEnd("doIt");
101     }
102 
103     doIt();
104 
105     /*promise实现*/
106     function doIt() {
107         console.time("doIt");
108         const time1 = 300;
109         step1(time1)
110             .then(time2 => {
111                 return step2(time1, time2)
112                     .then(time3 => [time1, time2, time3]);
113             })
114             .then(times => {
115                 const [time1, time2, time3] = times;
116                 return step3(time1, time2, time3);
117             })
118             .then(result => {
119                 console.log(`result is ${result}`);
120                 console.timeEnd("doIt");
121             });
122     }
123 
124     doIt();
5.总结
        个人理解async/await是用来解决同步异步,更重要的是优化了promise。

ok,到此结束,后续会把实际应用场景更新进来,欢迎指出毛病哦!

 

6.补充:
            处理错误逻辑
    ps:示例6-1-1。
            (一): try/catch/finally
                如果try块中的任何代码发生了错误,就会立即退出代码执行过程,然后接着执行catch块,此时,catch块会接收到一个包含错误信息的对象。
                finally子句一经使用,其代码无论如何都会执行。
                只要代码中包含finally子句,则无论try或catch语句块中包含什么样的代码——甚至return语句,都不会阻止finally子句的执行。
                执行顺序try->catch->finally。
            (二):JavaScript throw 语句:
                Throw抛出一个错误。
                创建自定义错误。
                可抛出字符串,数字,逻辑值或对象。
                !!!!!抛出错误javascript会停止往下执行。
                ps: throw “ too bing”
                throw 500
                throw new Error(‘’这是一个错误!!!);
            (三):函数定义方式
                (1):函数声明
                    function fun (a,b){
                        return a*b;
                    }
                    fun(1,2);
                    不会立即执行。
                (2):函数表达式
                    let a = function(a,b){
                        return a*b;
                    }
                    a(1,2);
                    等同于匿名函数通过变量名调用。
                (3):Function()构造函数
                    let fun = new Function(‘a‘,‘b‘,‘return a*b‘);
                    fun(1,2);
                (4):函数提升
                    提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。
                    提升(Hoisting)应用在变量的声明与函数的声明。
                ps:示例6-3-4
                (5):函数执行顺序
                ps:示例6-3-5
                (6):作用域
                ps:示例6-3-6

  

 

 1 let fun = async function (type) {
 2         if (type) {
 3             return ‘示例6-1-1‘;
 4         } else {
 5             throw new Error(‘sorry is Error!!!‘)
 6         }
 7     }
 8     async function test() {
 9         try {
10             let a = await fun(false);
11             console.log(a)
12         } catch (err) {
13             console.log(err);
14             return;
15         } finally {
16             console.log(‘我执行了!!!‘)
17         }
18     }
19     test();
 1 /*示例6-3-4*/
 2     function fun(a, b) {
 3         return a * b;
 4     }
 5     console.log(fun(1, 2), ‘函数声明‘);
 6 
 7     let a = function (a, b) {
 8         return a * b;
 9     }
10     console.log(a(1, 2), ‘函数表达式‘); //不能在初始化之前使用
11     let fun1 = new Function(‘a‘, ‘b‘, ‘return a*b‘);
12     console.log(fun1(1, 2), ‘构造函数‘);
13 
14     /*示例6-3-5*/
15     function f() { return 1; }
16     console.log(f()); // 第四个函数把第一个函数覆盖 4
17 
18     var f = new Function("return 2;");
19     console.log(f()); // 第二个函数把第四个函数覆盖 2
20 
21     var f = function () { return 3; }
22     console.log(f()); // 第三个函数把第二个函数覆盖 3
23 
24     function f() { return 4; }
25     console.log(f()); // 第四个函数已经被覆盖 3
26 
27     var f = new Function("return 5;");
28     console.log(f()); // 第五个函数把第三个函数覆盖 5
29 
30     var f = function () { return 6; }
31     console.log(f()); // 第六个函数把第五个函数覆盖 6
32 
33     /*示例6-3-6*/
34     var k = 4;
35     window.onload = function () {
36 
37         var k = 1;
38 
39         function t1() {
40             var k = 2;
41 
42             function test() {
43                 return k;
44             }
45             console.info(test()); // 弹出 2
46 
47             var test = function () {
48                 return k;
49             };
50             console.info(test()); // 弹出 2
51 
52             var test = new Function("return k;"); // 每次执行的时候,动态的new,*作用域,无法获得局部变量
53             console.info(test()); // 弹出 4
54 
55         }
56         t1();
57     };

 

async/await

上一篇:【转载】C#中使用double.TryParse方法将字符串转换为double类型


下一篇:固定虚拟机中windows系统的ip地址