JavaScript,jQuery:如何在循环中编写嵌套的Promise,而在更多循环中呢?

huangapple go评论68阅读模式
英文:

Javascript, jQuery: How to write nested Promises in LOOPS in more LOOPS?

问题

以下是您要翻译的内容:

"What kind of JavaScript or jQuery construction of callbacks and/or promises can be used in such a case? Can it be done at all?

I tried this working minimal example (/vocab and /vocab2 are REST services):

"use strict";

window.onload = function(e)
{ 
   console.log("HELLO WORLD");

   var promises = [];
   promises.push(doxxx());

   Promise.all(promises).then(
      dozzz();
   );
}

function doxxx()
{
  console.log('doxxx CALLED');
   $.ajax({
      url: '/vocab', 
      type: 'POST',
      dataType: 'json',
    success: function(result) 
    {
        console.log(result.data);
        var promises = [];
        $.each(result.data,  function( index, value )
        {
           promises.push(doyyy(value[3]));
        });

        return Promise.all(promises);
     }
 });
}

function doyyy(german)
{
   console.log('doyyy CALLED');
  $.ajax({
     url: '/vocab2', 
     type: 'POST',
    data: {german : german},
    dataType: 'json',
    success: function(result) 
    {
      return new Promise(function(myResolve, myReject) 
      {
        console.log(result.data);
      })
   }
});
}

function dozzz()
{
  console.log("END");
}

I expected all nested promises to be fullfilled before dozzz() is called and "END" is printed to the console.

But it was not working. It printed "END" before "doxxx CALLED" and "doyyy CALLED."

UPDATE

I tried the answer from Alexander Nenashev.
It worked.
Thank you.

Console output in correct order"

英文:

What kind of JavaScript or jQuery construction of callbacks and/or promises can be used in such a case? Can it be done at all?

I tried this working minimal example (/vocab and /vocab2 are REST services):

 "use strict";

 window.onload = function(e)
 { 
    console.log("HELLO WORLD");

    var promises = [];
    promises.push(doxxx());

    Promise.all(promises).then(
       dozzz();
    );
 }

function doxxx()
{
   console.log('doxxx CALLED');
    $.ajax({
       url: '/vocab', 
       type: 'POST',
       dataType: 'json',
     success: function(result) 
     {
         console.log(result.data);
         var promises = [];
         $.each(result.data,  function( index, value )
         {
            promises.push(doyyy(value[3]));
         });

         return Promise.all(promises);
      }
  });
 }

 function doyyy(german)
 {
    console.log('doyyy CALLED');
   $.ajax({
      url: '/vocab2', 
      type: 'POST',
     data: {german : german},
     dataType: 'json',
     success: function(result) 
     {
       return new Promise(function(myResolve, myReject) 
       {
         console.log(result.data);
       })
    }
 });
}

function dozzz()
{
   console.log("END");
}

I expected all nested promises to be fullfilled before dozzz() is called and "END" is printed to the console.

But it was not working. It printed "END" before "doxxx CALLED" and "doyyy CALLED."

UPDATE

I tried the answer from Alexander Nenashev.
It worked.
Thank you.

Console output in correct order

答案1

得分: 0

使用async/await会使代码更加可管理、可读和可维护。

"use strict";

window.onload = async function(e) { 
    console.log("HELLO WORLD");
    await doxxx();
    dozzz();
}

async function doxxx() {
    console.log('doxxx CALLED');
       
    const result = await $.ajax({
        url: '/vocab', 
        type: 'POST',
        dataType: 'json',
    });
       
    console.log(result.data);
       
    return Promise.all($.map(result.data, (_, value) => doyyy(value[3])));
}

async function doyyy(german) {
    console.log('doyyy CALLED');
        
    const result = await $.ajax({
        url: '/vocab2', 
        type: 'POST',
        data: { german: german },
        dataType: 'json',
    });
     
    console.log(result.data);
}

function dozzz() {
    console.log("END, but not the END");
}
英文:

Use async/await it will make the code more manageable, readable and maintainable.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

 &quot;use strict&quot;;

 window.onload = async function(e)
 { 
    console.log(&quot;HELLO WORLD&quot;);
    await doxxx();
    dozzz();
}

async function doxxx()
{
   console.log(&#39;doxxx CALLED&#39;);
   
   const result = await $.ajax({
       url: &#39;/vocab&#39;, 
       type: &#39;POST&#39;,
       dataType: &#39;json&#39;,
   });
   
   console.log(result.data);
   
   return Promise.all($.map(result.data, (_, value) =&gt; doyyy(value[3])));
 }

 async function doyyy(german)
 {
    console.log(&#39;doyyy CALLED&#39;);
    
    const result = await $.ajax({
      url: &#39;/vocab2&#39;, 
      type: &#39;POST&#39;,
     data: {german : german},
     dataType: &#39;json&#39;,
  });
 
  console.log(result.data);
}

function dozzz()
{
   console.log(&quot;END, but not the END&quot;);
}

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月13日 08:18:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76460990.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定