Как дождаться завершения цикла Javascript forEach, прежде чем переходить к следующему сентября - PullRequest
Новая
       45

Как дождаться завершения цикла Javascript forEach, прежде чем переходить к следующему сентября

1 голос
/ 24 октября 2019

Мне нужно дождаться запуска всех вызовов axios в функции, вызванной циклом forEach, прежде чем я вызову другую функцию для перезагрузки данных, которые должны обновляться вызовами axios. 

function1() {
    let arr = [1, 2, 3, 4, 5];
    arr.forEach((num) => {
        function2(num);
    });
    //Wait until each call in the forEach loop above
    //is done before running the function3() function.
    function3();
}

function2(number) {
    axios.post('/internal-url/action/' + number)
        .then((response) => {
            return response;
        });
}

function3() {
    console.log('reloading data...');
    /* DB call to reload data */
    console.log('data is reloaded');
}

Проблема здесь в том, что данные перезагружаются до завершения вызовов axios. Я знаю, что вызовы axios работали, потому что я вижу, что они обновлены в базе данных, но мне нужно, чтобы function1() дождался завершения всех вызовов axios в function2(), прежде чем выполнять перезагрузку в function3().

Я пытался сделать функции function1() и function2() async/await одновременно и по отдельности, но это не сработало. Как бы я поступил так конкретно?

Ответы [ 3 ]

2 голосов
/ 24 октября 2019

Создайте массив обещаний, затем используйте Promise.all, чтобы дождаться их разрешения / отклонения, используя async/await. 

// async/await - create an array of promises
// from function2, then await until Promise.all has
// fully resolved/rejected
async function1() {
  let arr = [1, 2, 3, 4, 5];
  const promises = arr.map((num) => function2(num));
  await Promise.all(promises);
  function3();
}

function2(number) {
  return axios.post('/internal-url/action/' + number);
}

function3() {
  console.log('reloading data...');
  /* DB call to reload data */
  console.log('data is reloaded');
}
1 голос
/ 24 октября 2019

Может быть так: 

const arr = [1, 2, 3, 4, 5];
let index = 0;
const answers = [];
(function loop() {
    const value = arr[index];
    function2(value).then(res => {
        answers.push(res);
    });
    index++;
    if (index < arr.length) {
        loop();
    }
})();
function3();
console.log(answers);
1 голос
/ 24 октября 2019

Лучшим решением было бы использовать Promise.all, чтобы все запросы могли выполняться параллельно. Это выглядело бы примерно так: 

function1() {
    let arr = [1, 2, 3, 4, 5];
    Promise.all(arr.map((num) => function2(num))).then(() => {
        function3();
    });
}

Это будет ждать, пока все обещания, которые вернул function2, будут разрешены, прежде чем вызвать function3.

...