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*/
    let fun = function (){
        console.log('错误示例');
    }
    await fun();

    let fun1 = function(){
        console.log('正确示例');
    }
    let fun =async function (){
        await fun1();
    }
    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并且相互依赖呢？

　　

    /*示例2-1*/

    let fun = async function(){
        return 'async';
    }
    console.log(fun());//Promise {<fulfilled>: "async"}

    /*示例2-2-1*/
    fun().then(e=>{
        console.log(e);//async
    })

    /*示例2-3-1*/
    var param = null;

    let fun =  () => {
        return new Promise(resolve => {
            setTimeout(() => resolve(function(){
                param = '111';
            }), 1000);
        });
    }

    fun().then(v => {
        v();
        console.log(param,'1');
    });
    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。

　　

    /*示例3-1-1*/
    let fun = function () {
        return "fun";
    }

    let asyncFun = async function () {
        return Promise.resolve("asyncFun");
    }

    async function test() {
        const v1 = await fun();
        const v2 = await asyncFun();
        console.log(v1, v2);
    }

    test();
    /*示例3-2-1*/
    var param = null;

    let fun = () => {
        return new Promise(resolve => {
            setTimeout(() => resolve(function () {
                param = '111';
            }), 1000);
        });
    }

    let awaitFun = async function () {
        await fun().then(v => {
            v();
            console.log(param, '1');
        });
        console.log(param, '2');
    }
    awaitFun();
    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。
        哇，是不是很神奇！！！

    /*示例4-1-1*/
    let fun = function () {
        return new Promise(resolve => {
            setTimeout(() => resolve("not async/await!!!"), 1000);
        });
    }

    fun().then(v => {
        console.log("async", v);
    });
    /*示例4-1-2*/
    let fun = function () {
        return new Promise(resolve => {
            setTimeout(() => resolve("is async/await!!!"), 1000);
        });
    }

    async function test() {
        const v = await fun();
        console.log(v);
    }

    test();

    /*示例4-2-1*/
    /**
     * 传入参数 n，表示这个函数执行的时间（毫秒）
     * 执行的结果是 n + 200，这个值将用于下一步骤
     */
    function getTime(n) {
        return new Promise(resolve => {
            setTimeout(() => resolve(n + 200), n);
        });
    }

    function step1(n) {
        console.log(`step1 with ${n}`);
        return getTime(n);
    }

    function step2(n) {
        console.log(`step2 with ${n}`);
        return getTime(n);
    }

    function step3(n) {
        console.log(`step3 with ${n}`);
        return getTime(n);
    }
    /*promise实现*/
    function doIt() {
        console.time("doIt");
        const time1 = 300;
        step1(time1)
            .then(time2 => step2(time2))
            .then(time3 => step3(time3))
            .then(result => {
                console.log(`result is ${result}`);
                console.timeEnd("doIt");
            });
    }

    doIt();
    /*async/await实现*/
    async function doIt() {
        console.time("doIt");
        const time1 = 300;
        const time2 = await step1(time1);
        const time3 = await step2(time2);
        const result = await step3(time3);
        console.log(`result is ${result}`);
        console.timeEnd("doIt");
    }

    doIt();

    /*4-2-2*/
    function step1(n) {
        console.log(`step1 with ${n}`);
        return getTime(n);
    }

    function step2(m, n) {
        console.log(`step2 with ${m} and ${n}`);
        return getTime(m + n);
    }

    function step3(k, m, n) {
        console.log(`step3 with ${k}, ${m} and ${n}`);
        return getTime(k + m + n);
    }
    /*async/await实现*/
    async function doIt() {
        console.time("doIt");
        const time1 = 300;
        const time2 = await step1(time1);
        const time3 = await step2(time1, time2);
        const result = await step3(time1, time2, time3);
        console.log(`result is ${result}`);
        console.timeEnd("doIt");
    }

    doIt();

    /*promise实现*/
    function doIt() {
        console.time("doIt");
        const time1 = 300;
        step1(time1)
            .then(time2 => {
                return step2(time1, time2)
                    .then(time3 => [time1, time2, time3]);
            })
            .then(times => {
                const [time1, time2, time3] = times;
                return step3(time1, time2, time3);
            })
            .then(result => {
                console.log(`result is ${result}`);
                console.timeEnd("doIt");
            });
    }

    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

　　

　

let fun = async function (type) {
        if (type) {
            return '示例6-1-1';
        } else {
            throw new Error('sorry is Error!!!')
        }
    }
    async function test() {
        try {
            let a = await fun(false);
            console.log(a)
        } catch (err) {
            console.log(err);
            return;
        } finally {
            console.log('我执行了！！！')
        }
    }
    test();

/*示例6-3-4*/
    function fun(a, b) {
        return a * b;
    }
    console.log(fun(1, 2), '函数声明');

    let a = function (a, b) {
        return a * b;
    }
    console.log(a(1, 2), '函数表达式'); //不能在初始化之前使用
    let fun1 = new Function('a', 'b', 'return a*b');
    console.log(fun1(1, 2), '构造函数');

    /*示例6-3-5*/
    function f() { return 1; }
    console.log(f()); // 第四个函数把第一个函数覆盖 4

    var f = new Function("return 2;");
    console.log(f()); // 第二个函数把第四个函数覆盖 2

    var f = function () { return 3; }
    console.log(f()); // 第三个函数把第二个函数覆盖 3

    function f() { return 4; }
    console.log(f()); // 第四个函数已经被覆盖 3

    var f = new Function("return 5;");
    console.log(f()); // 第五个函数把第三个函数覆盖 5

    var f = function () { return 6; }
    console.log(f()); // 第六个函数把第五个函数覆盖 6

    /*示例6-3-6*/
    var k = 4;
    window.onload = function () {

        var k = 1;

        function t1() {
            var k = 2;

            function test() {
                return k;
            }
            console.info(test()); // 弹出 2

            var test = function () {
                return k;
            };
            console.info(test()); // 弹出 2

            var test = new Function("return k;"); // 每次执行的时候，动态的new，顶级作用域，无法获得局部变量
            console.info(test()); // 弹出 4

        }
        t1();
    };