七分钟理解javascript回调函数,回调函数地狱

快速理解JavaScript回调函数概念,回调函数地狱及解决方法

1.回调函数

理解JavaScript回调函数不难,因为它就是普通函数,只不过是调用的位置与时机不同.它作为参数传递给另一个函数，并在某个特定的事件或条件发生时被调用执行.

上案例:

// 定义一个函数,参数是文作为回调函数使用的handleResult函数
funciton getResult(callback){
    // 一个定时器函数,两秒后执行
    setTimeOut(()=>{
        // result模拟异步获取的数据
        const result = '异步获取的数据';
        // 调动回调函数处理异步获取的数据
        callback(result); // => 异步获取的数据
    },2000)
}
// 定义一个作为回调函数使用的函数
function handleResult(data){
    console.log(data);
}
// 调用函数
getResult(handleResult);

所以回调函数就是,现在不调用,等执行完某些逻辑回头再调用的函数.和普通函数无异.也就是案例中,把要执行的逻辑封装到一个函数a里面(代码中的handleResult函数),把这个函数作为参数传给函数b(getResult函数),函数b执行完某些操作,再来调用a函数执行里面的逻辑.a函数作为回头再调用的函数,也就是回调函数.

有没有发现,案例中的setTimeout里面的箭头函数也是一个回调函数.

2 . 异步任务

还是用定时器函数举例,如果按照脚本执行的顺序,肯定是先打印111,在打印222,但是setTimeout函数是异步操作,也就是会把所有异步操作放入异步队列,只有所有同步操作全部执行完,才执行异步队列中的操作.

即使把setTimeout函数定时器时间设置为0,依然是要等到同步操作执行完才执行异步.

当然,JavaScript有很多实现异步操作的方式,比如发起http请求,Promise,generator/yield, async/await.node.js的读取文件操作也是异步任务.

3. 回调地狱

为了确保异步任务的按照特定的方式执行,就需要将后一个执行的任务嵌套到前一个任务里面.比较常见的业务场景就是你要调a接口获取到一个数值,这个数值,是调用b接口时候要用到的参数.为了确保一定在获取到a接口的数值后才调用b,这样就产生了回调函数的嵌套.回调函数嵌套的多了,层级混乱.也就产生了地狱回调

下面例子是用setTimeout函数解释地狱回调,分别在1秒3秒6秒时候打印字符串.

setTimeout(()=>{ //第一层
    console.log('李小羊');
    setTimeout(()=>{ //第二层
    	console.log('不是羊');
        setTimeout(()=>{ //第三层
    		console.log('是猫');
		},3000)
	},2000)
},1000)
// 李小羊
// 不是羊
// 是猫

4. 解决回调地狱

1. Promise

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

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

        function fn(str){
            var p = new Promise(function(resolve,reject){
                //此处直接调用成功的回调resolve,不演示失败的回调reject
                resolve(str)
            })
            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封装一下，不管什么操作都用than，就会导致一眼看过去全是then…then…then…,这样也是不利于代码维护的。

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

2. astnc/await

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

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

        async function fn() {
            var flag = true;
            if (flag) {
                return '李小羊';
            }
            else{
                throw '处理失败'
            }
        }
        fn()
        .then(data=>{
            console.log(data);
        })
        .catch(data=>{
            console.log(data);
        })

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

async关键字说完了，我们看看awai关键字

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

    //封装一个返回promise的异步任务
    function fn(str) {
        var p = new Promise(function resolve => {
                  resolve(str);
            })
        })
        return p;
    }

    //封装一个执行上述异步任务的async函数
    async function test(){
        var res1=await fn('李小羊');  //await直接拿到fn()返回的promise的数据，并且赋值给res
        var res2=await fn('不是羊');
        var res3=await fn('是猫');
        console.log(res1,res2,res3);
    }
    //执行函数
    test();
	// 执行结果 => 李小羊 不是羊 是猫					

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

总结:

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