已声明async箭头函数但调用时使用await报语法错如何解决？

• 1. 顶层await使用不符合规范：你当前的await直接写在普通JS脚本的顶层，根据ECMAScript规范，await关键字仅允许在async函数内部、async生成器、ES Module类型的脚本中使用，普通脚本顶层直接使用会抛出你遇到的语法错误。
• 2. 定时函数封装错误：你虽然给spalvaLaik加了async修饰，但该函数内部直接返回setTimeout的定时器ID，没有返回等待定时执行完成的Promise，就算解决了顶层await的问题，await也不会等待1秒再执行下一个逻辑，背景会直接跳到最终的黄色。

方案1：使用自执行async函数包裹逻辑（无需修改HTML） #

直接修改script.js内容如下：

let kunas = document.querySelector(`body`);

// 重新封装定时变色逻辑，返回标准Promise
let spalvaLaik = (spalv,laik) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            kunas.style.backgroundColor = spalv;
            resolve(); // 定时执行完成后触发resolve，告知await继续执行
        }, laik);
    })
};

// 用自执行async函数包裹需要使用await的逻辑
(async () => {
    await spalvaLaik("blue",1000)
    await spalvaLaik("green",1000)
    await spalvaLaik("yellow",1000)
})();

方案2：使用ES Module脚本支持顶层await #

先修改HTML中的script标签，添加type="module"属性：

<script type="text/javascript" src="script.js" type="module"></script>

再修改script.js内容，修改封装逻辑后可直接使用顶层await：

let kunas = document.querySelector(`body`);

let spalvaLaik = (spalv,laik) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            kunas.style.backgroundColor = spalv;
            resolve();
        }, laik);
    })
};

await spalvaLaik("blue",1000)
await spalvaLaik("green",1000)
await spalvaLaik("yellow",1000)

内容的提问来源于stack exchange，提问作者edga9966