解决回调地狱=》Promise、async/await

1.异步任务

       同步任务在主线程上排队执行，只有前一个任务执行完毕，才能执行下一个任务。异步任务不进入主线程，而是进入异步队列，前一个任务是否执行完毕不影响下一个任务的执行。同样，还拿定时器作为异步任务举例：

 // 异步方法
        asyncChange(){
            setTimeout(()=>{
            console.log("我是定时器")
            },1000)
            console.log('我是正常打印的log')
        },

2.回调地狱

如果让异步任务都同步执行，可以用回调地狱（回调函数中嵌套回调函数）

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

        },

使用回调地狱的缺点就是,代码嵌套太多层，不好维护，可读性很差，因此可以进行一下优化：

3.Promise

Promise是js中的一个原生对象，是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案。

Promise构造函数接收一个函数作为参数，我们需要处理的异步任务就写在该函数体内，该函数的两个参数是resolve，reject。异步任务执行成功时调用resolve函数返回结果，反之调用reject。
Promise对象的then方法用来接收处理成功时响应的数据，catch方法用来接收处理失败时相应的数据。
Promise的链式编程可以保证代码的执行顺序，前提是每一次在then做完处理后，一定要return一个Promise对象，这样才能在下一次then时接收到数据。
 

 // 异步方法
        asyncChange(str) {
            let p = new Promise(function (resolve, reject) {
                let flag = true
                setTimeout(() => {
                    if (flag) {
                        resolve(str)
                    } else {
                        reject('操作失败')
                    }
                })
            })

            return p
        },


mounted() {
        this.asyncChange('数字1')
        .then((data) => {
            console.log(data)
            return this.asyncChange('数字2')
        })
        .then((data) => {
            console.log(data)
            return this.asyncChange('数字3')
        })
        .then((data) => {
            console.log(data)
        })
    },

promise解决了代码冗余,原来的异步任务被promise进行了封装，但是代码还是一直有then。。。，此时可以继续进行优化，所以下面的async/await 可以时代码看起来更像同步代码。

4.async/await

async

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

 async asyncChange() {
          return '我是方法里的打印'
        },


mounted中打印this.asyncChange()

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

和Promise对象一样，处理异步任务时也可以按照成功和失败来返回不同的数据，处理成功时用then方法来接收，失败时用catch方法来接收数据：

 mounted() {
        this.asyncChange().then(data=>{
            console.log(data)
        }).catch(data=>{
            console.log(data)
        })
        console.log('先执行我，表明async声明的函数是异步的');
    },


async asyncChange() {
          let flag=true
          if(flag){
            return '成功结果'
          }else{
            throw '处理失败'
          }
        },

如果将flag改为false，结果显示处理失败

await

• await关键字只能在使用async定义的函数中使用
• ​await后面可以直接跟一个 Promise实例对象（可以跟任何表达式，更多的是跟一个返回Promise对象的表达式）
• await函数不能单独使用
• await可以直接拿到Promise中resolve中的数据。

//封装一个返回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('武林要以和为贵');  //await直接拿到fn()返回的promise的数据，并且赋值给res
            var res2=await fn('要讲武德');
            var res3=await fn('不要搞窝里斗');
            console.log(res1,res2,res3);
        }
        //执行函数
        test();