ES7中的Async和Await

1.async

       可以作用在任何方法前, 返回值是一个Promise对象(回调函数也可以使用async)

       函数内部return的返回值, 会成为then回调函数的参数

       async作用的方法,如果内部出现报错,可以被promise的catch方法捕获

       常规使用,一般都会通过try catch进行有可能报错的代码处理

let arr = [1,2,3,4,5,6];

    console.time("arrFor");
    for (let i=0;i<arr.length;i++){

    }
    console.timeEnd("arrFor");
    console.time("arrForEach");
    arr.forEach(async (item)=>{})
    console.timeEnd("arrForEach");



    let fn1 = async ()=>{
        // return
    }
    console.log(fn1());//undefined //使用async之后返回Promise对象

2.await

await只能作用在async修饰的方法中,不能单独使用,如果使用报错

 await是会阻塞代码执行

正常情况 await后面跟着一个Promise对象; 返回的是Promise对象的成功后结果; 如果是一个普通值,那么会直接返回这个值

 reject的返回 await没有办法进行捕获(使用try catch进行捕获)

  let p1 = ()=>{
            // return Promise.resolve("hello world")
            return Promise.reject("hello world")
        }
        async function fn1(){
            //使用await之后 像是在写同步代码一样
            //await是会阻塞代码执行
            try{
                let res = await p1();
                console.log("step2_1",res);
                console.log("step2_2")
            }catch (err){
                console.log("step2_err==>",err)
            }
        }
        fn1();
        //step2_1 hello world
        //step2_2

3.async await 回调地狱

回调地狱   简单说，就是函数作为参数层层嵌套

在使用JavaScript时，为了实现某些逻辑经常会写出层层嵌套的回调函数，

 如果嵌套过多，会极大影响代码可读性和逻辑，这种情况也被成为回调地狱

function fn1() {
        return new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve(1)
               console.log('1秒');
           },1000)
        })
    }
    function fn2() {
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(2)
                console.log('2秒');
            },2000)
        })
    }
    function fn3() {
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(3)
                console.log('3秒');
            },3000)
        })
    }
    (async function() {
        var a = fn1()
        var b = fn2()
        var c = fn3()
        await a  // 1
        await b  // 2
        await c  // 3
        console.log(a,b,c);
    })()
    // Promise.all([fn1(),fn2(),fn3()]).then(res=>{
    //     console.log(res);
    // })

4.async/await相比于promise的优势？

1.代码读起来更加同步，promise虽然摆脱了回调地狱，但是then的链式调用也会带来额外的阅读负担。

2.promise传递中间值非常麻烦，而async/await几乎是同步的写法，非常优雅。

3.错误处理友好，async/await可以用成熟的try/catch，promise的错误捕获非常沉余

4.调试友好，promise的调试很差，由于没有代码块，你不能在一个返回表达式的箭头函数中设置断点，如果你在一个，then代码块中使用调试器的步进（step--over）功能，调试器并不会进入后续的，then代码块，因为调试器只能跟踪同步代码的每一步。