«

es6回调地狱指的是什么

时间:2024-3-5 13:15     作者:韩俊     分类: Html+Css


本文小编为大家详细介绍“es6回调地狱指的是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“es6回调地狱指的是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

在es6中,回调地狱就是多层回调函数相互嵌套,即回调函数中嵌套回调函数的情况;它是为了实现代码顺序执行而出现的一种操作,它会造成我们的代码可读性非常差,后期不好维护。es6中使用promise来解决回调地狱的问题。

前言

在正式了解“回调地狱”之前,我们先了解两个概念:

1、回调函数

当一个函数作为参数传入另一个参数中,并且它不会立即执行,只有当满足一定条件后该函数才可以执行,这种函数就称为回调函数。我们熟悉的定时器和Ajax中就存在有回调函数:

setTimeout(function(){   //function(){console.log('执行了回调函数')}就是回调函数,它只有在3秒后才会执行
    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、异步任务

与之相对应的概念是“同步任务”,同步任务在主线程上排队执行,只有前一个任务执行完毕,才能执行下一个任务。异步任务不进入主线程,而是进入异步队列,前一个任务是否执行完毕不影响下一个任务的执行。同样,还拿定时器作为异步任务举例:

setTimeout(function(){
    console.log('执行了回调函数');
},3000)
console.log('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对象,这样才能在下一次then时接收到数据。

下面是实例代码:

        function fn(str){
            var p=new Promise(function(resolve,reject){
                //处理异步任务
                var 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封装一下,不管什么操作都用than,就会导致一眼看过去全是then…then…then…,这样也是不利于代码维护的。

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

2.async/await

首先我们看

async
关键字,他作为一个关键字放到声明函数前面,表示该函数为一个异步任务,不会阻塞后面函数的执行:

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


可以看到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声明的函数是异步的');


当把flag设置为false是,执行结果为:

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

  • await关键字只能在使用async定义的函数中使用

  • await后面可以直接跟一个 Promise实例对象(可以跟任何表达式,更多的是跟一个返回Promise对象的表达式)

  • await函数不能单独使用

  • await可以直接拿到Promise中resolve中的数据。

        //封装一个返回promise的异步任务
        function fn(str) {
            var p = new Promise(function (resolve, reject) {
                var flag = true;
                setTimeout(function () {
                    if (flag) {
                        resolve(str)
                    } else {
                        reject('处理失败')
                    }
                })
            })
            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的数据,才继续往下执行,这样就保证了代码的执行顺序,而且使异步代码看起来更像同步代码。

标签: javascript html css

热门推荐