回调地狱及如何解决回调地狱

回调地狱

根据我们在回调函数和异步任务中的内容可以得出一个结论：存在异步任务的代码，不能保证按照顺序执行，那如果非要代码顺序执行呢？
我们必须这样操作才能保证顺序正确：

setTimeout(function() {
    console.log('first');
    setTimeout(function(){
        console.log('second');
        setTimeout(function(){
            console.log('three');
        }, 1000)
    }, 1000)
}, 1000)
// 输出
first
second
three

回调函数中嵌套回调函数的情况就叫做回调地狱。
回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

如何解决回调地狱

Promise

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

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

function fn(str) {
    var p = new Promise((resolve, reject) => {
        var flag = true;
        if(flag) {
            resolve(str)
        }else {
            reject('操作失败')
        }
    })
    return p;
}

fn('first').then( data => {
    console.log(data);
    return fn('second');
}).then( data => {
    console.log(data);
    return fn('three');
}).then( data => {
    console.log(data);
}).catch( data => {
    console.log(data);
})

// 输出
first
second
three

Promise最大的问题就是代码冗余，原来的异步任务被Promise封装了一下，不管什么操作都用then。

async/await

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

PS E:\Node> node
Welcome to Node.js v12.18.0.
Type ".help" for more information.
> function fn(){
... return '111';
... }
undefined
> console.log(fn())
111
undefined
> async function fn(){
... return '111';
... }
undefined
> console.log(fn())
Promise { '111' }
undefined
>

可以看到async函数返回数据时自动封装为一个Promise对象。
和Promise对象一样，处理异步任务时也可以按照成功和失败来返回不同的数据。

// async函数返回数据时自动封装为一个Promise对象
async function fn(str) {
        var flag = true;
        if(flag) {
            return str
        }else {
            throw '操作失败'
        }
}

fn('first').then( data => {
    console.log(data);
    return fn('second');
}).then( data => {
    console.log(data);
    return fn('three');
}).then( data => {
    console.log(data);
}).catch( data => {
    console.log(data);
})

console.log('async声明函数是异步执行的')


fn('senond').then(data=>{
    console.log(data)
}).catch(data=>{
    console.log(data)
})

fn('first').then(data=>{
    console.log(data)
}).catch(data=>{
    console.log(data)
})

// 输出
async声明函数是异步执行的
first
senond
first
second
three

async关键字说完了，我们来看看wait关键字。

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

function fn(str) {
    var p = new Promise((resolve, reject) => {
        var flag = true;
        if(flag) {
            resolve(str)
        }else {
            reject('操作失败')
        }
    })
    return p;
}

async function test() {
    var res1 = await fn('first');
    var res2 = await fn('senond');
    var res3 = await fn('threee');

    console.log(res1, res2, res3);
}

test();

//输出
first senond threee

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

总结一下，当我们写代码遇到异步回调时，我们想让异步代码按照我们想要的顺序执行，如果按照传统的嵌套方式，就会出现回调地狱，这样的代码不利于维护，我们可以通过Promise对象进行链式编程来解决，这样尽管可以解决问题，但是ES7给我们提供了更加舒适的async/await语法糖，可以使得异步代码看起来更像是同步代码。
————————————————
版权声明：本文为CSDN博主「混子前端」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42698326/article/details/111075519