Async 和 Await

回调地狱

简单解释一下回调地狱 在使用JavaScript时 为了实现某些逻辑经常会写出层层嵌套的回调函数

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

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

// 地狱回调函数 把函数当做参数层层嵌套
        // async&await 
        // 封装公用函数          callHell函数名 arg1,arg2两个形参
        function callHell(arg1,arg2){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    var result =  arg1 + arg2 //以数组的形式显示
                    resolve(result)
                },2000)
            })
        }
        // async&&await配合使用
        async function fn(){
            var a = await callHell('','第一')
            var a1 = await callHell(a,'第二')
            var a2 = await callHell(a1,'第三')
            return a2
        }
        // 调用async&&await封装的函数
        fn().then(res=>{
            console.log(res);
        })

这个就是一个简单的小案例 配合async和await使用的

async

async 他可以作用在任何方法前，返回值是一个promise对象（回调函数也可以使用async）

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

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

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

// 可以作用在任何方法前，返回值是一个Promise对象（回调函数也可以使用async）
        // 函数内部 return 的返回值，会成为then回调函数的参数
        var xfn = async () => {
            return arr = {
                name:"徐凤年",
                age:25
            }
        }
        xfn().then(res=>{
            console.log(res);  //返回的是上面的数组
        })

await

await  只能作用在async修饰的方法中 不能单独使用 不然会报错

await 他是会阻塞代码执行的

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

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();