Cách trả lại nhiều Lời hứa và đợi tất cả chúng trước khi làm những việc khác

Tôi có một vòng lặp gọi một phương thức không đồng bộ. Vòng lặp này có thể gọi phương thức nhiều lần. Sau vòng lặp này, tôi có một vòng lặp khác chỉ cần được thực thi khi tất cả những thứ không đồng bộ được thực hiện xong.

Vì vậy, điều này minh họa những gì tôi muốn:

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

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

Tôi không rành về những lời hứa, vậy có ai có thể giúp tôi đạt được điều này không?

Đây là cách doSomeAsyncStuff()cư xử của tôi :

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

Có lẽ tôi phải làm điều gì đó như thế này:

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

Nhưng tôi không chắc về cú pháp.

Bạn có thể sử dụng Promise.all( spec , MDN ) cho điều đó: Nó chấp nhận một loạt các lời hứa riêng lẻ và trả lại cho bạn một lời hứa duy nhất được giải quyết khi tất cả những lời bạn đưa ra được giải quyết hoặc bị từ chối khi bất kỳ lời hứa nào trong số chúng bị từ chối.

Vì vậy, nếu bạn thực hiện doSomeAsyncStuffmột lời hứa trở lại, thì:

    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 có một bài viết về lời hứa tại đây . Tôi cũng trình bày chi tiết về các promsies trong Chương 8 của cuốn sách JavaScript: Đồ chơi Mới của tôi, các liên kết trong hồ sơ của tôi nếu bạn quan tâm.

Đây là một ví dụ:

 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();

Đầu ra mẫu (vì Math.random, những gì kết thúc đầu tiên có thể khác nhau):

Đang giải quyết 3
Đang giải quyết 2
Đang giải quyết 1
Đang giải quyết 4
Đang giải quyết 0
Tất cả đã hoàn thành [0,1,2,3,4]

Một chức năng có thể tái sử dụng hoạt động tốt cho mẫu này:

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

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

  return Promise.all(promises);
}

Ví dụ OP:

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

Một mẫu có liên quan, đang lặp lại trên một mảng và thực hiện thao tác không đồng bộ trên từng mục:

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

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

  return Promise.all(promises);
}

Thí dụ:

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)),
]);

Đây là mã mà tôi đã viết cho chính mình để hiểu câu trả lời được nêu ở đây. Tôi có các truy vấn mongoose trong vòng lặp for, vì vậy tôi đặt ở đây asyncFunctionđể thay thế nó. Hy vọng nó sẽ giúp bất cứ ai. Bạn có thể chạy tập lệnh này trong nút hoặc bất kỳ thời gian chạy Javascript nào.

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!");
    }
)