Day18-2-地狱回调-Promise-async-await技术

Promise技术

一 回调函数

当一个函数作为参数传入另一个函数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。我们熟悉的定时器就存在有回调函数

/**
 * 关于回调函数,我们最熟悉的是延时器
 * 延时器本质上是window对象的一个函数,有两个参数: 参数一 回调函数,参数二 延时时间
 */
setTimeout(function(){
    console.log("----回调函数执行了---");
},1000)

二 异步任务

与之相对应的概念是“同步任务”，只有前一个任务执行完毕，才能执行下一个任务。异步任务是前一个任务是否执行完毕不影响下一个任务的执行。同样，还拿定时器作为异步任务举例

setTimeout(function(){
    console.log("-------回调函数被调用了------");
},3000)

console.log("---------------");

如果按照代码编写的顺序，应该先输出“执行了回调函数”，再输出“111”。但实际输出为：

三 回调地狱是什么？

根据前面我们可以得出一个结论：存在异步任务的代码，不能保证能按照顺序执行，那如果我们非要代码顺序执行呢？

比如我要说一句话，语序必须是下面这样的：武林要以和为贵，要讲武德，不要搞窝里斗。
我必须要这样操作，才能保证顺序正确：

// setTimeout(()=>{
//     console.log("武林要以和为贵");
// },3000)

// setTimeout(()=>{
//     console.log("要讲武德");
// },2000)

// setTimeout(()=>{
//     console.log("不能欺负老年人");
// },1000)

/**
 * 存在异步任务的代码，不能保证能按照顺序执行
 * 但是我就想让上面的代码按照顺序执行,怎么办
 * 
 * 使用回调地狱来解决
 *  回调函数的嵌套就是回调地狱
 */
setTimeout(()=>{
    console.log("武林要以和为贵");
    setTimeout(()=>{
        console.log("要讲武德");
        setTimeout(()=>{
            console.log("不能欺负老年人");
        },1000)
    },2000)
},3000)

可以看到，代码中的回调函数套回调函数，这种回调函数中嵌套回调函数的情况就叫做回调地狱。

总结一下，回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

四 如何解决回调地狱

1 Promise

Promise是js中的一个原生对象，是一种异步编程的解决方案

Promise构造函数接收一个函数作为参数，我们的异步任务就写在该函数体内，该函数的两个参数是resolve，reject。异步任务执行成功时调用resolve函数返回结果，反之调用reject。
Promise对象的then方法用来接收处理成功时的数据，catch方法用来接收处理失败时的数据。

Promise基本用法

/**
 * Promise是一种异步编程的解决方案
 * Promise构造函数接收一个函数作为参数，我们的异步任务就写在该函数体内,该函数的两个参数是resolve，reject
 * resolve和reject都是函数
 * 异步任务执行成功,调用resolve函数,把成功的结果传出去
 * 异步任务执行失败,调用reject函数,把失败后的结果传出去
 * Promise对象的then方法用来接收处理成功时的数据，catch方法用来接收处理失败时的数据,finally方法是不管成功还是失败都会执行的代码
 */

let p = new Promise((resolve,reject)=>{
    if(false){
        //执行成功
        resolve("执行成功")
    }else{
        //执行失败
        reject("执行失败")
    }
})

p.then(res =>{
    console.log(res);
}).catch(err =>{
    console.log(err,"-----");
}).finally(()=>{
    console.log("不论成功,还是失败,finally都会执行");
})

使用Promise解决地狱回调

//创建第一个promise对象
const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("武林要以和为贵")
    },3000)
})

const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("要讲武德")
    },2000)
})

const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("不能欺负老年人")
    },1000)
})



//使用Promise的链式调用来让异步任务顺序执行
p1.then(res =>{
    console.log(res);
    return p2
}).then(res =>{
    console.log(res);
    return p3
}).then(res =>{
    console.log(res);
})

2 async/await

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

        async function fn(){
            return '不讲武德';
        }
        console.log(fn());

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XipvbYYf-1692591907305)(https://woniumd.oss-cn-hangzhou.aliyuncs.com/java/chenyun/image-20230215085552979.png)]

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

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

        async function fn() {
            var flag = true;
            if (flag) {
                return '不讲武德';
            }
            else{
                throw '处理失败'
            }
        }
        fn()
        .then(data=>{
            console.log(data);
        })
        .catch(data=>{
            console.log(data);
        })

        console.log('先执行我，表明async声明的函数是异步的');

接下来我们看看awai关键字

• await只能在被async定义的函数中使用
• await会阻塞函数中的代码，一直等待结果
• await可以直接拿到Promise对象resolve中的数据。

//创建第一个promise对象
const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("武林要以和为贵")
    },3000)
})

const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("要讲武德")
    },2000)
})

const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("不能欺负老年人")
    },1000)
})

/**
 * await会让程序进入等待状态,只有当await获取到Promise对象中resolve的数据时,程序才会继续往下执行
 */
async function fun(){
    const r1 = await p1
    const r2 = await p2
    const r3 = await p3
    console.log(r1);
    console.log(r2);
    console.log(r3);
}
fun()

结果为：

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

总结
总结一下，当我们写代码遇到异步回调时，我们想让异步代码按照我们想要的顺序执行，如果按照传统的嵌套方式，就会出现回调地狱，这样的代码不利于维护，我们可以通过Promise对象进行链式编程来解决，这样尽管可以解决问题，但是ES7给我们提供了更加舒适的async/await语法，使代码的阅读性更高。