Блог

Главная - Вопросы по программированию - ожидает извлечения всех файлов

ожидает извлечения всех файлов

#javascript #es6-promise

#javascript #es6-обещание

Вопрос:

Я использую только чистый JS и HTML. Никаких фреймворков.

Я загружаю несколько HTML-файлов в свой index.html . После того, как все они будут извлечены, я хотел бы продолжить работу со сценарием. Я пытаюсь выяснить, как это решить (я думаю, с помощью Promises), но не могу заставить это работать. Как дождаться завершения всех из них?

 const prepareHead = fetch("../static/_includes/_head.html")
            .then(response => {
                return response.text()
            })
            .then(data => {
                document.querySelector("head").innerHTML = data;
                resolve();
            });

    const prepareHeader = fetch("../static/_includes/_header.html")
            .then(response => {
                return response.text()
            })
            .then(data => {
                document.querySelector("header").innerHTML = data;
            });

    const prepareStaticLinks = fetch("../static/_includes/_static_links.html")
            .then(response => {
                return response.text()
            })
            .then(data => {
                document.querySelector("static_links").innerHTML = data;
            });


    const prepareFooter = fetch("../static/_includes/_footer.html")
            .then(response => {
                return response.text()
            })
            .then(data => {
                document.querySelector("footer").innerHTML = data;
            });

    await Promise.all([prepareHead, prepareHeader, prepareFooter, prepareStaticLinks]);
    // next line should be called only after all files are fetched
    console.log("document prepared");

но await Promise не работает:
Uncaught SyntaxError: await is only valid in async functions and async generators

Каков правильный способ сделать это?

Комментарии:

1. в нем уже сказано, что вам нужно сделать, это допустимо только в async function() { ... }

2. синтаксис async / await — это всего лишь другой способ написания обещаний. удалите свой await , и все должно быть хорошо.

3. Попробуйте Promise.all(...fetches) посмотреть: Сделайте что-нибудь > Ожидание завершения нескольких ответов all API > Одновременный вызов нескольких API

Ответ №1:

Попробуйте заменить

 await Promise.all([prepareHead, prepareHeader, prepareFooter, prepareStaticLinks]);
console.log("document prepared");

с помощью

 Promise.all([prepareHead, prepareHeader, prepareFooter, prepareStaticLinks])
  .then(() => {
    console.log("document prepared")
  });

Другим вашим вариантом было бы использовать await внутри async функции, например

 const getData = async () => {
  const prepareHead = fetch("../static/_includes/_head.html")
          .then(response => {
              return response.text()
          })
          .then(data => {
              document.querySelector("head").innerHTML = data;
              resolve();
          });

  const prepareHeader = fetch("../static/_includes/_header.html")
          .then(response => {
              return response.text()
          })
          .then(data => {
              document.querySelector("header").innerHTML = data;
          });

  const prepareStaticLinks = fetch("../static/_includes/_static_links.html")
          .then(response => {
              return response.text()
          })
          .then(data => {
              document.querySelector("static_links").innerHTML = data;
          });


  const prepareFooter = fetch("../static/_includes/_footer.html")
          .then(response => {
              return response.text()
          })
          .then(data => {
              document.querySelector("footer").innerHTML = data;
          });

  await Promise.all([prepareHead, prepareHeader, prepareFooter, prepareStaticLinks]);
  // next line should be called only after all files are fetched
  console.log("document prepared");
};

getData();