Async和Await

 async

作用：

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

        

let fn1 = async ()=>{
        // return
    }
console.log(fn1());

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

let fn2 = async ()=>{
        return 1
    }
console.log(fn2());
fn2().then(res=>{
     console.log("fn2.then==>",res)
})

    3.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)
 })

   

await

作用：

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

await是会阻塞代码执行

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

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

 let p1 = ()=>{
            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();

async await 回调地狱

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

在使用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)
   })
}

buildCatList('', 'Panther').then(function (res) {
        return buildCatList(res, 'Janguar')
    }).then(function (res) {
        return buildCatList(res, 'Lion')
    }).then(function (res) {
        console.log(res)
})

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)  
}
render()