如何归还许多诺言并等待所有承诺，然后再做其他事情

Question

我有一个循环，该循环调用一种方法，该方法会异步地做东西。该循环可以多次调用该方法。在此循环之后，我只有在所有异步工作完成时才需要执行另一个循环。

因此，这说明了我想要的：

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

但是我不确定语法。

Answer 1

您可以使用Promise.all（ spec ，< a href =“ https://developer.mozilla.org/en-us/docs/web/javascript/reference/reference/global_objects/promise/promise/promise/all” rel =“ nofollow noreferrer”> nofollow noreferrer“> 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在Promises 在这里。我还详细介绍了我的书 javascript的第8章：新玩具，如果您有兴趣，我的个人资料中的链接。

这是一个例子：

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，首先完成的内容可能会有所不同，但是“全部完成”行将在结尾处）：

Resolving 3
Resolving 2
Resolving 1
Resolving 4
Resolving 0
All done [0,1,2,3,4]

再次请注意，履行数组的内容在输入阵列中承诺的顺序（不是履行的顺序）。

Answer 2

可重复使用的功能适用于此模式：

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

---

相关模式，在数组上迭代并在每个项目上执行异步操作：

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

Answer 3

/*** Worst way ***/
for(i=0;i<10000;i++){
  let data = await axios.get(
    "https://yourwebsite.com/get_my_data/"
  )
  //do the statements and operations
  //that are dependant on data
}

//Your final statements and operations
//That will be performed when the loop ends

//=> this approach will perform very slow as all the api call
// will happen in series


/*** One of the Best way ***/

const yourAsyncFunction = async (anyParams) => {
  let data = await axios.get(
    "https://yourwebsite.com/get_my_data/"
  )
  //all you statements and operations here
  //that are dependant on data
}
var promises = []
for(i=0;i<10000;i++){
  promises.push(yourAsyncFunction(i))
}
await Promise.all(promises)
//Your final statement / operations
//that will run once the loop ends

//=> this approach will perform very fast as all the api call
// will happen in parallal

Answer 4

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

Answer 5

这是我为自己编写的代码，以了解此处所述的答案。我在for循环中有猫鼬查询，所以我将asyncfunction放置在这里。希望它能帮助任何人。您可以在节点或许多JavaScript Runtimes中的任何一个中运行此脚本。

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

Answer 6

如果您想多次做同样的事情，这是一个优雅的解决方案：

await Promise.all(new Array(10).fill(0).map(() => asyncFn()));

这会创建一个带有10个项目的阵列，将其填充零，然后将其映射到一系列承诺中。