一文详解回调地狱

前言

在正式了解 回调地狱 之前，我们先来了解两个基础概念：

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 可以有效解决回调地狱问题，使代码更清晰、易于维护。

这篇文章介绍了回调地狱的概念及其解决方案，适用于希望优化异步代码的开发者。

复制全文生成海报 JavaScript 编程异步编程

综合 一文详解回调地狱