Асинхронность, async, await

Question

Необходимо в цикле отправлять по файлу на сервер и отслеживать событие, когда отправлены все файлы. Но вывод "Все файлы отправлены" происходит раньше, не дожидаясь отправки. Как можно исправить?

PS. Использую Vue.JS

filesSubmit() {
  const fd = new FormData();
  const vue = this;
  async function submitAllFiles() {
    vue.files.forEach(async(file, index) => {
      fd.append('file', file);
      await vue.axios
        .post('http://....', fd)
        .then(() => console.log('Файл отправлен'))
        .catch(() => console.log('Ошибка'))
    });
    console.log('Done!');
  }
  submitAllFiles().then(() => console.log('Все файлы отправлены'));
}

Answer 1

filesSubmit() {
  const fd = new FormData();
  const vue = this;
  async function submitAllFiles() {
    const promises = vue.files.map(async(file, index) => {
      fd.append('file', file);
      await vue.axios
        .post('http://...', fd)
        .then(() => {
          console.log('Файл отправлен');
        })
        .catch(() => console.log('Ошибка'))
    });
    await Promise.all(promises);
  }
  submitAllFiles().then(() => console.log('Все файлы отправлены'));
}

БЛОГ НА HUSL

Асинхронность, async, await

Ответы (1 шт):