Async和Await

async&await

async：

• async叫异步函数。是ES2017新出的，这让异步操作变得更简单了。本质上是Generator的语法糖，所以本质上还是操作promise对象观察状态。

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

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

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

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

await：

• await只能作用在async修饰的方法中,不能单独使用,如果使用报错:await is only valid in async functions and the top level bodies of modules

• await是会阻塞代码执行

• 正常情况 await后面跟着一个Promise对象; 返回的是Promise对象的成功后结果; 如果是一个普通值,那么会直接返回这个值reject的返回 await没有办法进行捕获(使用try catch进行捕获

async&await是Promise和Generator的语法糖

回调地狱：

async await 回调地狱

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

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

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

 回调地狱：一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套。它会造成我们的代码可读性非常差，后期不好维护。

解决方法： 

1 拆解 function  将各步拆解为单个的 function

    function buildCatList(list, returnVal, fn) {
        setTimeout(function (name) {
            var catList = list === '' ? name : list + ',' + name
            fn(catList)
        }, 200, returnVal)
    }
    
    buildCatList('', 'Panther', getJanguar)
    
    function getJanguar(list) {
        buildCatList(list, 'Janguar', getLynx)
    }
    
    function getLynx(list) {
        buildCatList(list, 'Lion', print)
    }
    
    function print(list) {
        console.log(list)
    }

2 通过 Promise 链式调用的方式

    function buildCatList(list, returnVal) {
        return new Promise(function (resolve, reject) {
            setTimeout(function (name) {
                var catList = list === '' ? name : list + ',' + name
                resolve(catList)
            }, 200, returnVal)
        })
    }

3 async / await

    function buildCatList(list, returnVal) {
        return new Promise(function (resolve, reject) {
            setTimeout(function (name) {
                var catList = list === '' ? name : list + ',' + name
                resolve(catList)
            }, 200, returnVal)
        })
    }
    function fn(list) {
        return list + ',' + 555
    }
    async function render() {
        var a = await buildCatList('','Panther')
        var b = await buildCatList(a, 'Jaguar')
        var c = await buildCatList(b, 'Lion')
        var d = await fn(c)
        console.log(d)  // Panther,Jaguar,Lion,555
    }
    render()

    function hell(arg) {
        return new Promise((resolve, reject) => {
            setTimeout(()=>{
                var val
                if(!arg)  val = '1'
                else val = arg
                resolve(arg + 1)
            },1000)
        })
    }
    function fn(arg) {
        return arg + ',' + 'end'
    }
    async function render() {
        var a = await hell('2')
        var b = await hell(a)
        var c = await hell(b)
        var d = await fn(c)
        console.log(d)
    }
    render()