一文详解回调地狱

前言

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

1. 回调函数（callback）

被作为实参传入另一个函数中，并且会在该外部函数内被调用，用来完成某些任务的函数，称为回调函数。

有时候回调函数不会立即执行，只有当满足一定条件后该函数才可以执行，且回调函数是在传给的函数内部被调用执行的。

我们熟悉的 定时器 和 Ajax 中就有这样的回调函数：

setTimeout(function(){  
    console.log('执行了回调函数');
},3000)  //3000毫秒

这里的回调函数是 function(){console.log('执行了回调函数')} ，在满足时间过去3秒后才会开始执行。

//1.创建异步对象
var xhr=new XMLHttpRequest();
//2.绑定监听事件(接收请求)
xhr.onreadystatechange=function(){
    //此方法会被调用4次
    //最后一次，readyState==4
    //并且响应状态码为200时，才是我们要的响应结果 xhr.status==200
    if(xhr.readyState==4 && xhr.status==200){
        //把响应数据存储到变量result中
        var result=xhr.responseText;
        console.log(result);
    }
}
//3.打开链接（创建请求）
xhr.open("get","/demo/ajaxDemo",true);
//4.发送请求
xhr.send();

这里的回调函数是 xhr.onreadystatechange 绑定的函数，在 xhr.send() 发送请求并拿到响应后执行。

回调函数运用得当，可以减少代码冗余，增强代码的复用性，优化代码的可读性，提供很好的可维护性。

2. 异步任务

在 JavaScript中，所有任务可以分为两种，一种是同步任务，一种是异步任务：

同步任务：在 主线程（用来解释和执行 JavaScript 代码） 上排队执行，只有前一个任务执行完毕，才能执行下一个任务。
异步任务：不进入主线程，而是进入 任务队列，只有 当主线程上的所有同步任务执行完毕之后，主线程才会读取任务队列，将任务放到执行栈，开始执行任务（例如：ajax请求、io操作、setTimeout 等事件调用的回调函数）。

同样，还拿定时器作为异步任务举例：

setTimeout(function(){
    console.log('执行了回调函数');
},3000)
console.log('111');

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

111
执行了回调函数

这种不阻塞后面同步任务执行的任务就叫做异步任务。接下来让我们看看什么是回调地狱。

回调地狱是什么

根据前面我们可以得出一个结论：存在异步任务的代码，不能保证会按照代码编写的顺序来执行，那如果我们非要代码按顺序执行呢？

比如我要输出一段话，要求语序必须是下面这样的：“武林要以和为贵，要讲武德，不要搞窝里斗”。

那似乎必须要这样操作，才能保证顺序正确：

setTimeout(function () {  //第一层
    console.log('武林要以和为贵');
    setTimeout(function () {  //第二层
        console.log('要讲武德');
        setTimeout(function () {   //第三层
            console.log('不要搞窝里斗');
        }, 1000)
    }, 2000)
}, 3000)

输出效果：

武林要以和为贵
要讲武德
不要搞窝里斗

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

总结一下，回调地狱就是为了实现 异步代码 顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，难以维护。

如何解决回调地狱

1. Promise

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

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

function fn(str){
    let p=new Promise(function(resolve,reject){
        //处理异步任务
        let flag=true;
        setTimeout(function(){
            if(flag){
                resolve(str)
            }
            else{
                reject('操作失败')
            }
        })
    })
    return p;
}

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);
})

输出效果：

武林要以和为贵
要讲武德
不要搞窝里斗

可以看到已经实现了我们的需求，但 Promise 最大的问题就是 代码冗余，原来的异步任务被 Promise 封装一下，不管什么操作都用 then，就会导致一眼看过去全是 then...then...then...，这样也是不利于代码维护的。

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

2. async/await

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

java

async function fn(){
    return '不讲武德';
}
console.log(fn());

610

可以看到 async 函数返回数据时自动封装为一个 Promise 对象。

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

async function fn() {
    let flag = true;
    if (flag) {
        return '不讲武德';
    }
    else{
        throw '处理失败'
    }
}
fn().then(data=>{
    console.log(data);
}).catch(data=>{
    console.log(data);
})

console.log('先执行我，表明async声明的函数是异步的');

输出结果：

先执行我，表明async声明的函数是异步的
不讲武德

当把 flag 设置为 false 时，执行结果为：

先执行我，表明async声明的函数是异步的
处理失败

async 关键字说完了，我们看看 await 关键字：

await 关键字只能在使用 async 定义的函数中使用
await 后面可以直接跟一个 Promise 实例对象（可以跟任何表达式，但常用的是跟一个返回 Promise 对象的表达式）
await 函数不能单独使用
await 可以直接拿到 Promise 中的 resolve 中的数据

//封装一个返回promise的异步任务
function fn(str) {
    let p = new Promise(function (resolve, reject) {
        let flag = true;
        setTimeout(function () {
            if (flag) {
                resolve(str)
            } else {
                reject('处理失败')
            }
        })
    })
    return p;
}

//封装一个执行上述异步任务的async函数
async function test(){
    let res1 = await fn('武林要以和为贵');  //await直接拿到fn()返回的promise的数据，并且赋值给res
    let res2 = await fn('要讲武德');
    let res3 = await fn('不要搞窝里斗');
    console.log(res1, res2, res3);
}
//执行函数
test();

打印结果为：

武林要以和为贵 要讲武德 不要搞窝里斗

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

总结

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

一文详解回调地狱 ​

前言 ​

1. 回调函数（callback） ​

2. 异步任务 ​

回调地狱是什么 ​

如何解决回调地狱 ​

1. Promise ​

2. async/await ​

总结 ​