วิธีคืนสัญญามากมายและรอให้หมดก่อนทำอย่างอื่น

ฉันมีลูปที่เรียกเมธอดที่ทำสิ่งต่างๆแบบอะซิงโครนัส ลูปนี้สามารถเรียกใช้เมธอดได้หลายครั้ง หลังจากลูปนี้ฉันมีลูปอื่นที่ต้องดำเนินการก็ต่อเมื่อทำสิ่งที่ไม่ตรงกันทั้งหมด

สิ่งนี้แสดงให้เห็นถึงสิ่งที่ฉันต้องการ:

for (i = 0; i < 5; i++) {
    doSomeAsyncStuff();    
}

for (i = 0; i < 5; i++) {
    doSomeStuffOnlyWhenTheAsyncStuffIsFinish();    
}

ฉันไม่ค่อยคุ้นเคยกับคำสัญญามีใครช่วยฉันทำสิ่งนี้ให้สำเร็จได้บ้าง

นี่คือdoSomeAsyncStuff()พฤติกรรมของฉัน:

function doSomeAsyncStuff() {
    var editor = generateCKEditor();
    editor.on('instanceReady', function(evt) {
        doSomeStuff();
        // There should be the resolve() of the promises I think.
    })
}

บางทีฉันอาจต้องทำสิ่งนี้:

function doSomeAsyncStuff() {
    var editor = generateCKEditor();
    return new Promise(function(resolve,refuse) {
        editor.on('instanceReady', function(evt) {
            doSomeStuff();
            resolve(true);
        });
    });
}

แต่ฉันไม่แน่ใจเกี่ยวกับไวยากรณ์

คุณสามารถใช้Promise.all( spec , MDN ) สำหรับสิ่งนั้น: ยอมรับคำสัญญาจำนวนมากและให้คำสัญญาเดียวที่ได้รับการแก้ไขเมื่อทุกข้อที่คุณให้ไว้ได้รับการแก้ไขหรือปฏิเสธเมื่อข้อใดข้อหนึ่งถูกปฏิเสธ

ดังนั้นหากคุณdoSomeAsyncStuffคืนคำสัญญาแล้ว:

    const promises = [];
//  ^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−− use `const` or `let`, not `var`
    
    for (let i = 0; i < 5; i++) {
//       ^^^−−−−−−−−−−−−−−−−−−−−−−−− added missing declaration
        promises.push(doSomeAsyncStuff());
    }
    
    Promise.all(promises)
        .then(() => {
            for (let i = 0; i < 5; i++) {
//               ^^^−−−−−−−−−−−−−−−− added missing declaration
                doSomeStuffOnlyWhenTheAsyncStuffIsFinish();    
            }
        })
        .catch((e) => {
            // handle errors here
        });

MDN มีบทความเกี่ยวกับสัญญาที่นี่ ฉันยังอธิบายรายละเอียดเกี่ยวกับพรหมลิขิตในบทที่ 8 ของหนังสือJavaScript: The New Toysลิงก์ในโปรไฟล์ของฉันหากคุณสนใจ

นี่คือตัวอย่าง:

 function doSomethingAsync(value) {
     return new Promise((resolve) => {
         setTimeout(() => {
             console.log("Resolving " + value);
             resolve(value);
         }, Math.floor(Math.random() * 1000));
     });
   }
   
   function test() {
       const promises = [];
       
       for (let i = 0; i < 5; ++i) {
           promises.push(doSomethingAsync(i));
       }
       
       Promise.all(promises)
           .then((results) => {
               console.log("All done", results);
           })
           .catch((e) => {
               // Handle errors here
           });
   }
   
   test();

ผลลัพธ์ตัวอย่าง (เนื่องจากMath.randomสิ่งที่เสร็จสิ้นก่อนอาจแตกต่างกันไป):

การแก้ไข 3
การแก้ไข 2
การแก้ไข 1
การแก้ไข 4
การแก้ปัญหา 0
ทำทั้งหมด [0,1,2,3,4]

ฟังก์ชันที่ใช้ซ้ำได้ใช้งานได้ดีสำหรับรูปแบบนี้:

function awaitAll(count, asyncFn) {
  const promises = [];

  for (i = 0; i < count; ++i) {
    promises.push(asyncFn());
  }

  return Promise.all(promises);
}

ตัวอย่าง OP:

awaitAll(5, doSomeAsyncStuff)
  .then(results => console.log('doSomeStuffOnlyWhenTheAsyncStuffIsFinished', results))
  .catch(e => console.error(e));

รูปแบบที่เกี่ยวข้องกำลังวนซ้ำบนอาร์เรย์และดำเนินการ async ในแต่ละรายการ:

function awaitAll(list, asyncFn) {
  const promises = [];

  list.forEach(x => {
    promises.push(asyncFn(x));
  });

  return Promise.all(promises);
}

ตัวอย่าง:

const books = [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }];

function doSomeAsyncStuffWith(book) {
  return Promise.resolve(book.name);
}

awaitAll(books, doSomeAsyncStuffWith)
  .then(results => console.log('doSomeStuffOnlyWhenTheAsyncStuffIsFinished', results))
  .catch(e => console.error(e));

const doSomeAsyncStuff = async (funcs) => {
  const allPromises = funcs.map(func => func());
  return await Promise.all(allPromises);
}

doSomeAsyncStuff([
  () => new Promise(resolve => setTimeout(() => resolve(), 100)),
  () => new Promise(resolve => setTimeout(() => resolve(), 100)),
  () => new Promise(resolve => setTimeout(() => resolve(), 100)),
  () => new Promise(resolve => setTimeout(() => resolve(), 100)),
  () => new Promise(resolve => setTimeout(() => resolve(), 100)),
]);

นี่คือรหัสที่ฉันเขียนขึ้นเพื่อตัวเองเพื่อให้เข้าใจคำตอบที่ระบุไว้ที่นี่ ฉันมีคำค้นหาพังพอนในการวนซ้ำดังนั้นฉันจึงใช้ที่นี่asyncFunctionแทน หวังว่ามันจะช่วยทุกคน คุณสามารถรันสคริปต์นี้ในโหนดหรือรันไทม์ของ Javascript จำนวนมาก

let asyncFunction = function(value, callback)
{
        setTimeout(function(){console.log(value); callback();}, 1000);
}



// a sample function run without promises

asyncFunction(10,
    function()
    {
        console.log("I'm back 10");
    }
);


//here we use promises

let promisesArray = [];

let p = new Promise(function(resolve)
{
    asyncFunction(20,
        function()
        {
            console.log("I'm back 20");
            resolve(20);
        }
    );
});

promisesArray.push(p);


for(let i = 30; i < 80; i += 10)
{
    let p = new Promise(function(resolve)
    {
        asyncFunction(i,
            function()
            {
                console.log("I'm back " + i);
                resolve(i);
            }
        );
    });
    promisesArray.push(p);
}


// We use Promise.all to execute code after all promises are done.

Promise.all(promisesArray).then(
    function()
    {
        console.log("all promises resolved!");
    }
)