回调地狱（ES6）

小鱼儿 2022-12-24 10:59 160阅读 0赞

# 回调地狱 #

嵌套太多就形成回调地狱

--------------------

函数的类型：回调函数

--------------------

回调函数：将一个函数当做参数使用的时候，这个函数就变成了回调函数

arr.map(function(){
        
    
        })
        arr.sort(function(){
        
    
        })
        arr.forEach(function(){
        
    
        })
        move(handler)
    
        new Page({
        show:function(){
        }})

> 当某些异步操作中，无法判断什么时候完成，此时，就需要一个回调函数，在异步操作做内部完成后再调用这个函数  
> console.log(pid);

> 当一个then中反悔了一个新的promise时，新的promise的then就可以放在外面的then后面形成链式操作

new Promise(function (resolve, reject) {
        
            sendAjax({
        
                url: "province.php",
                success(res) {
        
                    resolve(res);
                }, error() {
        
                    reject();
                }
            })
        }).then(function (res) {
        
            for (var i = 0; i < res.length; i++) {
        
                if (res[i].name == "xx省") {
        
                    var pid = res[i].id;
                }
            }
            return new Promise(function (resolve, reject) {
        
                sendAjax({
        
                    url: "city.php",
                    data: {
         pid },
                    success(res) {
        
                        resolve(res);
                    },
                    error() {
        
                        reject();
                    }
                })
            })
        }).then(function (res) {
        
            for (var i = 0; i < res.length; i++) {
        
                if (res[i].name == "xx市") {
        
                    var pid = res[i].id;
                }
            }
            return new Promise(function (resolve, reject) {
        
                sendAjax({
        
                    url: "area.php",
                    data: {
         pid },
                    success(res) {
        
                        resolve(res);
                    }
                    , error() {
        
                        reject();
                    }
                })
            })
        }).then(function (res) {
        
            for (var i = 0; i < res.length; i++) {
        
                if (res[i].name == "xx区") {
        
                    console.log(res[i].name);
                }
            }
        }).catch(function(){
                    //只需要一个catch
            console.log("错误了");
        })

# 回调地狱的最终解决方案（ES7）： #

//es7提供了一个语法
    /* 
    async/await
    async关键字用来修饰一个函数，在函数前面加上
    await关键字必须用在async修饰的函数内，写在promise前
        作用是等待promise成功后的结果
    */

async function fn() {
        
           console.log(456);
           var res = await pAjax({
        
               url: "demo.php"
           });
           // console.log(res);
           console.log(789);
           for (var i = 0; i < res.length; i++) {
        
               if (res[i].name == "xx省") {
        
                   var pid = res[i].id;
               }
           }
           console.log(pid);
           var res = await pAjax({
        
               url: "city.php",
               data:{
        pid}
           })
           for (var i = 0; i < res.length; i++) {
        
               if (res[i].name == "xx市") {
        
                   var pid = res[i].id;
               }
           }
           console.log(pid);
           var res =  await pAjax ({
        
               url:"area.php",
               data:{
        pid}    
           })
           for(var i = 0 ; i <res.length;i++){
        
               if(res[i].name == "xx区"){
        
                   console.log(res[i].name);
               }
           }
       }
       fn();//fn变成了异步函数
       console.log(123);

执行结果：456  
123  
789  
13  
133  
xx区