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

最新推荐文章于 2024-05-19 08:08:57 发布

yuanyi正

最新推荐文章于 2024-05-19 08:08:57 发布

阅读量1.7k

点赞数 2

分类专栏： jquery js 文章标签： js ajax jquery

本文链接：https://blog.csdn.net/yuan_618859/article/details/117964674

版权

js 同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

jquery

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是最好的。

yuanyi正

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js经典的回调地狱解决办法

回调地狱问题是发生在，后面每一个函数执行，都要等待前面一个完成，才能继续下去即，函数1–函数2–函数3–，一个个按顺序执行，函数2要等函数1完成，才能开始但是，js是一起执行的，才不会等你呢，这要怎么办呢？回调可以解决：但会出现回调地狱,就像下面一样：一层一层嵌套，好恶心，哈哈解决方法2：用jquery的defer函数，能比较好解决<!DOCTYPE html><html lang="en"><head> <meta charset=".
复制链接

扫一扫

专栏目录