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

Promise技术

一 回调函数

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

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

二 异步任务

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

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

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

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

image-20230616143446168

三 回调地狱是什么?

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

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

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

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

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

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

image-20230616145529786

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

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

四 如何解决回调地狱

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声明的函数是异步的');

image-20230215085612129

接下来我们看看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()

结果为:

image-20230215085629383

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值