回调函数与回调地狱及其解决方法 | JavaScript

风筝风

已于 2022-10-13 16:03:44 修改

阅读量2k

点赞数 7

分类专栏： JavaScript笔记文章标签： javascript 前端

于 2022-10-13 15:29:03 首次发布

本文链接：https://blog.csdn.net/qq_42376600/article/details/127297659

版权

JavaScript笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaScript中的回调函数与回调地狱及其解决方法

以下为整理的思维导图图片版+文字版
文末附有参考文章链接

知识点思维导图版

在这里插入图片描述

一、什么是回调函数

1.MDN的定义

回调函数是作为参数传给另一个函数的函数，然后通过在外部函数内部调用该回调函数以完成某种操作。

2.其他文章的解释定义

回调函数是一个函数，将会在另一个函数完成执行后立即执行。回调函数是一个作为参数传给另一个 JavaScript 函数的函数。这个回调函数会在传给的函数内部执行。

3.补充：回调函数和异步的关系

回调函数不完全等于异步
本质上说，回调函数是异步的
异步是指JS代码的执行顺序，为了解决JS单线程可能导致阻塞的情况，必须编写异步代码
回调可以理解为一种业务逻辑，回调函数是异步操作的一种基本方法

二、为什么需要回调函数

1.JS单线程可能导致的情况

如果在队列中有一件事情需要花费很多的时间，那么后面的任务都将处于一种等待状态，有时甚至会出现浏览器假死现象。

2.引入JS异步机制

每一个任务有一个或多个回调函数(callback)，前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，异步模式甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降。
与之相对应的概念是“同步任务”，同步任务在主线程上排队执行，只有前一个任务执行完毕，才能执行下一个任务。

3.回调函数的作用

回调函数是异步编程最基本的方法，其优点是简单、容易理解和部署。
回调函数最大的缺点是不利于代码的阅读和维护，各个部分之间高度耦合(Coupling)

三、怎样避免回调地狱

1.回调地狱是什么

回调函数的层层嵌套，就叫做回调地狱。回调地狱会造成代码可复用性不强，可阅读性差，可维护性(迭代性差)，扩展性差等问题。
回调地狱的原因是，当人们试图以一种从上到下的视觉方式执行JS的方式编写JS，期望第1行发生的任何事情都会在第2行的代码开始运行之前完成，而代码的实际执行则事与愿违。
回调地狱的本质：①嵌套函数存在严重的耦合，牵一发而动全身。②错误处理比较艰难，不能使用try catch 和不能直接return。

2.怎样避免回调地狱

1.保持代码简短简洁，例如函数命名清晰

2.模块化

3.Promise

a.基本概念

Promise本身只是一个容器,真正异步的是它的两个回调resolve()和reject()
Promise本质不是控制异步代码的执行顺序（无法控制），而是控制异步代码结果处理的顺序
Promise对象有三个状态：pending（进行中），fulfilled（已成功），rejected（已失败）

b.使用Promise解决回调地狱

思路

（1）promise创建时，里面的代码还是异步无序操作
（2）promise的原理是，利用then方法将异步操作的结果，按照顺序执行，catch方法用来接收处理失败时相应的数据。在上一个promise的then方法中，返回下一个promise对象
总结：不要在创建promise的时候去处理异步操作结果，而应该通过 then() 方法来处理

（以下代码来自文章《什么是回调地狱，如何用Promise解决回调地狱，看完这篇你就明白了》文末有链接）

来自文章《什么是回调地狱，如何用Promise解决回调地狱，看完这篇你就明白了》文末有链接

c.Promise的优缺点

优点

（1）避免了回调地狱，用同步的方式写异步的代码
（2）控制异步操作更容易，Promise对象提供了统一的接口
（3）链式操作，可以在then中继续写Promise对象并返回，然后继续调用then来进行回调操作

缺点

（1）then的链式调⽤也会带来额外的阅读负担，不易读
（2）Promise对象一旦新建就会立即执行，无法中途取消
（3）若不设置回调函数，Promise内部会抛出错误，不会流到外部
（4）当处于pending状态时，无法得知当前处于哪一阶段

4.async/await

a.基本概念

async/await是 Generator 函数的语法糖，也就是处理异步操作的另一种高级写法
async/await是基于Promise实现的，它不能用于普通的回调函数

b.使用async/await解决回调地狱

async声明function是一个异步函数，返回一个promise对象，可以使用 then 方法添加回调函数。
async函数内部return语句返回的值，会成为then方法回调函数的参数。

（以下代码来自文章《什么是回调地狱，如何用Promise解决回调地狱，看完这篇你就明白了》文末有链接）

c.async/awit的优缺点

优点

（1）内置执行器， Generator 函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器，也就是说，async 函数的执行，与普通函数一模一样，只要一行。
（2）语义更清晰，与* 和 yield相比，async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果
（3）适用性更广，co 函数库约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值(数值、字符串和布尔值，但这时等同于同步操作)
缺点
滥用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性