async和await、回调地狱

1、async

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

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

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

    let fn2 = async ()=>{
        return 1
    }
    // console.log(fn2());//使用async之后返回Promise对象
    fn2().then(res=>{
        console.log("fn2.then==>",res)
    })

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

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

    let fn3 = async ()=>{
        try{
            const a = "123";
            a = 123
            return 1
        }catch(err){
            console.log("fn3.err==>",err);
            return 2
        }
    }
    fn3().then(res=>{
        console.log("fn3.then==>",res)
    })

2、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进行捕获)

3、回调地狱

简单说，就是函数作为参数层层嵌套

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

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

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

解决2 通过 Promise 链式调用的方式

解决4  async / await

        function hill(str){
            return new Promise((resolve,reject)=>{
                var flag = true
                setTimeout(function(){
                    if(flag){
                        resolve(str)
                    }else{
                        reject("处理失败")
                    }
                },1000)
            })
        }
        async function fn(){
            var res1 = await hill('hello word')
            console.log('res1====>',res1);
            var res2 = await hill('hello')
            console.log('res2====>',res2);
            var res3 = await hill('hel')
            console.log(res1,res2,res3);
        }
        fn()