jquery $.when().then()嵌套为回调函数

pkln4tw6 于 2022-12-22 发布在 jQuery

关注(0)|答案(1)|浏览(172)

我有一个函数query1()，其中包含一个$.when（）promise，我想用它作为父$.when（）promise的参数。从query 1（）返回的值应该向下传递，就像在变量b中一样。问题是父$.when在子,, the之前解析，但它需要等待。
纠正顺序的最佳方法是什么，以便父级等待子级解决？

$.when(query1(a))
.then( function(b) {

   console.log("step 3");

   return query2(b);

})
.then( function(c) {

   console.log("step 6")

});

function query1(a) {
   console.log("step 1");

   $.when(asynchronous_function())
   .then( function(data) {
      
      console.log("step 2");
      return data;

   });
}

function query2(b) {
   console.log("step 4");

   $.when(asynchronous_function())
   .then( function(data) {
      
      console.log("step 5");
      return data;

   });
}

控制台将显示：

Step 3
Step 6
Step 1
Step 2
Step 4
Step 5

我在这里试图避免“死亡金字塔”的事情，使我的代码更具可读性和模块化。
谢谢你的帮助。

jquery

来源：https://stackoverflow.com/questions/74859904/when-then-nested-as-a-callback-function

1条答案

按热度按时间

xqk2d5yq1#

从query1()返回的值...
这就是所缺少的：query1()没有return语句。then回调中的语句是用于 * 该 * 回调函数的return语句，而不是用于query1()的function语句。每个需要返回重要内容的function都需要其 * 自己的 * return语句。
因此，将其添加到query1和query2中。

$.when(query1(1))
.then( function(b) {
   console.log("step 3", b);
   return query2(b);
})
.then( function(c) {
   console.log("step 6", c)
});

function query1(a) {
   console.log("step 1", a);
   return $.when(Promise.resolve(42*a))
   .then( function(data) {
      console.log("step 2", data);
      return data;
   });
}

function query2(b) {
   console.log("step 4", b);
   return $.when(Promise.resolve(b*144))
   .then( function(data) {
      console.log("step 5", data);
      return data;
   });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

话虽如此，当您要传递一个promise对象时，没有理由调用$.when，该promise可以直接用于在其上调用then。
这会导致：

query1(1)
.then( function(b) {
   console.log("step 3", b);
   return query2(b);
})
.then( function(c) {
   console.log("step 6", c)
});

function query1(a) {
   console.log("step 1", a);
   return Promise.resolve(42*a)
   .then( function(data) {
      console.log("step 2", data);
      return data;
   });
}

function query2(b) {
   console.log("step 4", b);
   return Promise.resolve(b*144)
   .then( function(data) {
      console.log("step 5", data);
      return data;
   });
}

现在已经没有理由再使用jQuery延迟对象来处理promise了，因为ECMA Script 2015 JavaScript有了原生的promise。
您甚至可以使用async/await语法：

(async () => {
    const b = await query1(1);
    console.log("step 3", b);
    const c = await query2(b);
    console.log("step 6", c)
})();

async function query1(a) {
    console.log("step 1", a);
    const data = await Promise.resolve(42*a);
    console.log("step 2", data);
    return data;
}

async function query2(b) {
    console.log("step 4", b);
    const data = await Promise.resolve(b*144);
    console.log("step 5", data);
    return data;
}

赞(0）回复(0）举报 2022-12-22

我来回答

jquery $.when().then()嵌套为回调函数

1条答案

相关问题

热门标签

最新问答