Async和Await

async搭配await是ES7提出的，它的实现是基于Promise。async可以作用在任何方法之前，返回的是一个Promise对象，可以使用then函数添加回调函数。async的作用方法：就是在内部出现报错，可以被Promise中的catch方法捕获

1. async / await

每个 async 方法都返回一个 promise 对象
举个例子：

var promise = function() {
    return new Promise(function(resolve, reject) {
        setTimeout(() => {
            resolve('wait 2')
        }, 2000);
    })
}

async function f() {
    // response 就是 promise 执行成功的值
    const response = await promise();
    console.log(response);

}

// 不能在 async 方法外面用 await
// 需要使用 then 回调函数……
f().then(() => console.log('Finished'));

跟我们所想的结果一样， 等待异步程序执行完成。那么就又回到了await，await会和下面的代码同步执行吗？

	    var promise = function() {
        return new Promise(function(resolve, reject) {
            setTimeout(() => {
                resolve(new Date())
            }, 2000);
        })
    }

    async function f() {
        // response 就是 promise 执行成功的值
        const response = await promise();
        const response1 = await promise();
        console.log(response);
        console.log(response1);

    }

    // 不能在 async 方法外面用 await
    // 需要使用 then 回调函数……
    f().then(() => console.log('Finished'));

很明显看出来，awai会阻塞代码的执行，只有执行完当前的命令才会在执行下一条
那么async / await 在底层转换成了 promise 和 then 回调函数。也就是说，这是使用 promise 的语法糖。每次我们使用 await, 都创建一个 promise 对象，然后把剩下的 async 函数中的操作放到 then 回调函数中。
注意：await只能作用在async修饰符的方法中，不能进行单独第一个使用，正常情况下await后面会跟一个Promise对象，返回的是Promise对象的成功后结果，如果Await 抛出了异常，reject 我们可以用try{} catth (e) {} 的方法捕获和处理错误的异常

2. 回调地狱

回调地狱 简单说，就是函数作为参数层层嵌套，多用于ajax请求，在使用JavaScript时，为了实现某些逻辑经常会写出层层嵌套的回调函数

存在异步任务的代码，不能保证能按照顺序执行
比如我要说一句话，语序必须是下面这样的：111，222，333。
那么我需要这样操作

	     setTimeout(function () {  //第一层
            console.log('武林要以和为贵');
            setTimeout(function () {  //第二程
                console.log('要讲武德');
                setTimeout(function () {   //第三层
                    console.log('不要搞窝里斗');
                }, 1000)
            }, 2000)
        }, 3000)

可以看出，代码中的回调函数套回调函数，居然套了3层，这种回调函数中嵌套回调函数的情况就叫做回调地狱。
总结就是，回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

那该如何解决回调地狱呢？

解决回调地狱

1. Promise

Promise是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案。

Promise构造函数接收一个函数作为参数，我们需要处理的异步任务就卸载该函数体内，该函数的两个参数是resolve，reject。异步任务执行成功时调用resolve函数返回结果，反之调用reject。

function fn(str){
            var p=new Promise(function(resolve,reject){
                //处理异步任务
                var flag=true;
                setTimeout(function(){
                    if(flag){
                        resolve(str)
                    }
                    else{
                        reject('操作失败')
                    }
                })
            })
            return p;
        }

        fn('111')
        .then((data)=>{
            console.log(data);
            return fn('222');
        })
        .then((data)=>{
            console.log(data);
            return fn('333')
        })
        .then((data)=>{
            console.log(data);
        })
        .catch((data)=>{
            console.log(data);
        })

2. async/await

async关键字, 他作为一个关键字放到声明函数前面，表示该函数为一个异步任务，不会阻塞后面函数的执行

 async function fn(){
        return '222';
    }
    console.log(fn());

可以看到async函数返回数据时自动封装为一个Promise对象。

那么配合await来解决回调地狱

   //封装一个返回promise的异步任务
    function fn(str) {
        var p = new Promise(function (resolve, reject) {
            var flag = true;
            setTimeout(function () {
                if (flag) {
                    resolve(str)
                } else {
                    reject('处理失败')
                }
            })
        })
        return p;
    }

    //封装一个执行上述异步任务的async函数
    async function test(){
        var res1=await fn('111');  //await直接拿到fn()返回的promise的数据，并且赋值给res
        var res2=await fn('222');
        var res3=await fn('333');
        console.log(res1,res2,res3);
    }
    //执行函数
    test();

await：等待执行，因为当代码执行到async函数中的await时，代码就在此处等待不继续往下执行，直到await拿到Promise对象中resolve的数据，才继续往下执行，这样就保证了代码的执行顺序，而且使异步代码看起来更像同步代码。