等待获取所有文件

Question

我只使用纯 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

正确的做法是什么？

Answer 1

尝试更换

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

和

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

你的另一个选择是在 async 函数中使用 await，就像这样

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

等待获取所有文件

await for all files to be fetched

javascript

es6-promise