一文详解回调地狱
前言
在正式了解 回调地狱 之前，我们先来了解两个基础概念：
1. 回调函数（Callback）
回调函数是指作为实参传入另一个函数，并在该外部函数内部被调用的函数。回调函数通常在满足特定条件后才会执行，常见的回调函数应用包括 定时器 和 Ajax 请求：
setTimeout(function(){
console.log('执行了回调函数');
}, 3000);
这里的回调函数 function(){console.log('执行了回调函数')} 会在3秒后执行。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
console.log(result);
}
}
xhr.open("get", "/demo/ajaxDemo", true);
xhr.send();
在上面的 Ajax 例子中，回调函数被绑定到 xhr.onreadystatechange，并在请求响应后执行。
2. 异步任务
在 JavaScript 中，任务分为同步任务和异步任务：
- 同步任务：在主线程上按顺序排队执行，前一个任务执行完后才能执行下一个任务。
- 异步任务：不进入主线程，而是进入任务队列。当主线程上的同步任务执行完毕后，异步任务才会被执行。
例如：
setTimeout(function(){
console.log('执行了回调函数');
}, 3000);
console.log('111');
输出顺序为：
111
执行了回调函数
这表明异步任务不会阻塞后续同步任务的执行。
回调地狱是什么
异步任务不一定按照代码的编写顺序执行，但有时我们希望确保它们按顺序执行。例如，要按顺序输出一段话：
setTimeout(function () {
console.log('武林要以和为贵');
setTimeout(function () {
console.log('要讲武德');
setTimeout(function () {
console.log('不要搞窝里斗');
}, 1000);
}, 2000);
}, 3000);
虽然这段代码可以按顺序输出，但嵌套了多层回调函数，这种嵌套现象就是 回调地狱。它会导致代码可读性差且难以维护。
如何解决回调地狱
1. 使用 Promise
Promise 是一种异步编程解决方案，可以替代传统的回调函数。
Promise构造函数接收一个函数作为参数，异步任务写在该函数内，并通过resolve和reject来处理任务成功或失败。- 使用
then方法处理成功的结果，catch方法处理失败的情况。 - 通过链式调用
then，可以确保代码按顺序执行。
示例代码：
function fn(str) {
return new Promise(function(resolve, reject) {
let flag = true;
setTimeout(function() {
if (flag) {
resolve(str);
} else {
reject('操作失败');
}
}, 1000);
});
}
fn('武林要以和为贵').then((data) => {
console.log(data);
return fn('要讲武德');
}).then((data) => {
console.log(data);
return fn('不要搞窝里斗');
}).then((data) => {
console.log(data);
}).catch((data) => {
console.log(data);
});
2. 使用 async/await
async/await 是 ES7 引入的语法糖，使得异步代码看起来更像同步代码。
async关键字用于声明一个异步函数，该函数会返回一个Promise对象。await关键字用于等待一个Promise完成，获取其结果后才继续执行后续代码。
示例代码：
function fn(str) {
return new Promise(function(resolve, reject) {
let flag = true;
setTimeout(function() {
if (flag) {
resolve(str);
} else {
reject('处理失败');
}
}, 1000);
});
}
async function test() {
let res1 = await fn('武林要以和为贵');
let res2 = await fn('要讲武德');
let res3 = await fn('不要搞窝里斗');
console.log(res1, res2, res3);
}
test();
输出结果：
武林要以和为贵 要讲武德 不要搞窝里斗
await 会在异步任务完成后再继续执行后续代码，确保了代码的执行顺序。
总结
当面对异步任务时，如果使用传统的嵌套回调方式，可能会陷入 回调地狱，导致代码难以维护。通过 Promise 和 async/await 可以有效解决回调地狱问题，使代码更清晰、易于维护。
这篇文章介绍了回调地狱的概念及其解决方案，适用于希望优化异步代码的开发者。