js经典的回调地狱解决办法

6 篇文章 0 订阅

回调地狱问题
是发生在,后面每一个函数执行,都要等待前面一个完成,才能继续下去
即,函数1–函数2–函数3–,一个个按顺序执行,函数2要等函数1完成,才能开始
但是,js是一起执行的,才不会等你呢,这要怎么办呢?

回调可以解决:但会出现回调地狱,就像下面一样:
一层一层嵌套,好恶心,哈哈

在这里插入图片描述

解决方法2:用jquery的Deferred函数,能比较好解决

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script src="./jquery.min.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  hello world!-好的asdfasdf 12323
  <p style="font-family: sans-serif;">上传失败</p>
  <p id="time"></p>
  <script>
    document.getElementById('time').innerHTML = Date.now();


    $().ready(async () => {
      console.error('jquery加载完成:', $)

      var requestFun = function(obj){
        let {type,url,data} = obj
        var dtd = $.Deferred();
        $.ajax({
              type,
              url,
              data,
              dataType: "json",
              success: function(data){
                console.error('success:',data);
                dtd.resolve(data)      
              },
              error: function(data){
                console.error('error:',data); 
                dtd.reject(data)         
              }
          });
          return dtd.promise();
      }

      // 参考连接 https://blog.csdn.net/weixin_34106122/article/details/92575433

      var fun1 = function () {
        var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象

        // 请求后台
        let obj={
          type: 'get',
          url: '/one',
          data: {name: 'tom',age: 12},
        }
        requestFun(obj).then(
          (data)=>{
            console.error('请求返回data:',data);
            // 成功,然后调resolve
            dtd.resolve(data)
          },
          (err)=>{
            console.error('请求err:',err);
            // 失败,然后调reject
            dtd.reject(err)
          }
        )
        
        return dtd.promise(); // 返回promise对象
      };

      var fun2 = function () {
        var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
        let obj={
          type: 'get',
          url: '/two',
          data: {name: 'tom',age: 13},
        }
        requestFun(obj).then(
          (data)=>{
            console.error('请求返回data:',data);
            // 成功,然后调resolve
            setTimeout(()=>{
              dtd.resolve(data)
            },2000)
          },
          (err)=>{
            console.error('请求err:',err);
            // 失败,然后调reject
            dtd.reject(err)
          }
        )
        return dtd.promise(); // 返回promise对象
      };

      var fun3 = function () {
        var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
        let obj={
          type: 'get',
          url: '/three',
          data: {name: 'tom',age: 14},
        }
        requestFun(obj).then(
          (data)=>{
            console.error('请求返回data:',data);
            // 成功,然后调resolve
            dtd.resolve(data)
          },
          (err)=>{
            console.error('请求err:',err);
            // 失败,然后调reject
            dtd.reject(err)
          }
        )
        return dtd.promise(); // 返回promise对象
      };


      // 每个函数都会返回一个promise,用链式的then来接收结果
      fun1()
      .then(
        (res) => {
          console.log('成功时:', res);
          return fun2()
        },
        (error) => {
          console.error('失败时:', error);
          return fun2()
        }
      )
      .then(
        (res) => {
          console.log('成功时:', res);
          return fun3()
        },
        (error) => {
          console.error('失败时------:', error);
          return fun3()
        }
      )
      .then(
        (res) => {
          console.log('成功时:', res);
        },
        (error) => {
          console.error('失败时:', error);
        }
      )

    })
  </script>
</body>

</html>

解决办法3: 用最新的async await 也是很好解决的,但要考虑浏览器的兼容性问题喔,所以可能上面的方法2是最好的。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值