Async和Await

async

async用于声明一个异步的function

async可以用在任意方法面前将普通函数改为异步函数返回的是一个Promise对象

async配合await使用是一个异步的阻塞方法
async内部return返回的值会作为then回调的第一个参数,如果函数内部出现错误会成为then回调的第二个参数或被catch所捕获

await

await只能在async中使用在普通函数中使用会报错

await后面一般跟一个Promise对象,返回该对象的结果

await后面如果没有Promise对象，返回该对象的值

什么是回调地狱

回调地狱可以理解为回调函数嵌套回调函数

我们可以从下面代码来理解一下

比如我们要让三句话顺序的执行  今天  明天 昨天

  setTimeout(function() {
            console.log('今天');
            setTimeout(function() {
                console.log('明天');
                setTimeout(function() {
                    console.log('昨天');
                }, 1000)
            }, 2000)
        }, 3000)

返回的结果就是  今天 明天 昨天

然后我们可以用async/await来解决回调地狱

async放在声明函数前表示该函数为一个异步任务不会阻塞后边代码执行

 async function fn() {
            return '今天'
        }
        console.log(fn()); //Promise {<fulfilled>: "今天"

async返回数据时自动封装成一个promise对象 处理异步任务时也可以按照成功和失败来返回不同的数据，处理成功时用than方法来接收，失败时用catch方法来接收数据w

 async function fn() {
            var flag = true;
            if (flag) {
                return '吃饭';
            } else {
                throw '处理失败'
            }
        }
        fn()
            .then(data => {
                console.log(data);
            })
            .catch(data => {
                console.log(data);
            })
            //当把flag设置false时会返回处理失败

然后我们看一看await

await        

我们可以先封装一个Promise的异步任务

 function fn(aa) {
            var P = new Promise(function(resolve, reject) {
                var flag = true
                setTimeout(function() {
                    if (flag) {
                        resolve(aa)
                    } else {
                        reject('处理失败')
                    }
                })
            })
            return P
        }

封装一个执行以上所说的异步任务的async函数

 async function fn() {
            var n1 = await fn('今天')
            var n2 = await fn('明天')
            var n3 = await fn('昨天')
            console.log(n1, n2, n3);
        }
        fn()

   返回的结果为  今天 明天  昨天