回调地狱

76 阅读1分钟

回调地狱

  • 回调地狱 并 不是 一个 bug 而是 一种代码格式, 这种 代码 不利于我们阅读

解决方法 Promise(期约) 他是解决 回调地狱代码的

      //封装异步代码
        function fu(lose, win) {
            //设置随机数 (生成  0~1 向下取整 * 3000 0 ~ 2700 ) + 1500 
            const timer = Math.floor(Math.random() * 3000) + 1500
            // 设置延时器 
            setTimeout(() => {
            // 判断 随机生成的延时器时间 timer> 3000 毫秒时 表示链接失败 调用函数 fun 打印
                if (timer > 3000) {
                   lose()
              // 判断 随机生成的延时器时间 timer> 3000 毫秒时 表示链接成功 调用函数 fun1 打印
                } else {
                    win()
                }
            }, timer)
        }

        function fun() {
            console.log('网络申请失败, 请重新申请')
        }
        function fun1() {
            console.log('申请成功, 欢迎访问')
        }

      // 调用函数 fn 传递 实参 fun  和  fun1  对应 形参 lose(失败) 和 win(成功))
       fu(fun ,fun1)

       // 此处 也可以 使用 箭头函数 书写 这样写 就删除上面的 fun 和 fun1

       fn(
        /**
         *  fn( 
         *   实参1
         *   , 
         *   实参2
         * )
         *  为了理解方便带上 函数 名 不然可以 不写 因为
         *  函数 调用 时 实参  和 形参 时 一一对应 的 
        */
    
        fun()=>{
           console.log('网络申请失败, 请重新申请')   
           fn(
             fun()=>{
            console.log('第二次网络申请失败, 请重新申请')
               fn(
                fun()=>{
                 console.log('第三次网络申请失败, 请重新申请')
                },
                fun1()=>{
                    console.log('第三次申请成功, 欢迎访问')
                }
               )
             },
             fun1()=>{
               console.log('第二次申请成功, 欢迎访问')
             }
           )
        },
        fun1()=>{
             console.log('申请成功, 欢迎访问')
        }
      )
 
  // 这样非常 不利于阅读