咨询热线020-66889888
诚信为本:市场永远在变,诚信永远不变。

咨询热线

13988888888
手机:020-66889888
电话:13988888888
地址:海南省海口市58号
邮箱:admin@youweb.com

顺达资讯

>>你的位置: 首页 > 顺达资讯

一文告诉你什么是回调地狱,如何解决回调地狱?

发布时间:2024-08-12 02:43:34

在正式了解“回调地狱”之前,我们先了解两个概念:

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

这里的回调函数是,在满足时间3秒后执行。

 

这里的回调函数是绑定的函数,在发送请求并拿到响应后执行。

  1. 异步任务
    与之相对应的概念是“同步任务”,同步任务在主线程上排队执行,只有前一个任务执行完毕,才能执行下一个任务。异步任务不进入主线程,而是进入异步队列,前一个任务是否执行完毕不影响下一个任务的执行。同样,还拿定时器作为异步任务举例:
 

如果按照代码编写的顺序,应该先输出“执行了回调函数”,再输出“111”。但实际输出为:
在这里插入图片描述
这种不阻塞后面任务执行的任务就叫做异步任务。
接下来让我们看看什么是回调地狱。

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

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

 

在这里插入图片描述

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

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

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

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

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

在这里插入图片描述
但是Promise最大的问题就是代码冗余,原来的异步任务被Promise封装一下,不管什么操作都用than,就会导致一眼看过去全是then…then…then…,这样也是不利于代码维护的。

所以下面的async/await 可以时代码看起来更像同步代码。

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

 

在这里插入图片描述
可以看到async函数返回数据时自动封装为一个Promise对象。

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

 

在这里插入图片描述
当把flag设置为false是,执行结果为:
在这里插入图片描述
关键字说完了,我们看看关键字

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

结果为:
在这里插入图片描述
为什么叫等待呢,因为当代码执行到函数中的时,代码就在此处等待不继续往下执行,知道拿到Promise对象中resolve的数据,才继续往下执行,这样就保证了代码的执行顺序,而且使异步代码看起来更像同步代码。

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

在这里插入图片描述

咨询热线:020-66889888
站点分享:
友情链接:
手机:13988888888
电话:020-66889888
地址:海南省海口市58号
Copyright © 2012-2018 顺达注册-顺达娱乐-顺达官方站 版权所有
ICP备案编号:琼ICP备88889999号