Uncaught ReferenceError: async未定义问题排查及async函数正确使用咨询

咱们一步步拆解你的问题并解决：

错误根源分析 #

你遇到的Uncaught ReferenceError: async is not defined错误，核心问题出在动态生成捐赠按钮的onclick属性赋值上：

你原本的代码里写了：

document.getElementById("popcorn").innerHTML = `
  <p>钱包地址: ${user.get('ethAddress')}</p>
  <p><button id="donate_btn" onclick=${donate}>捐赠</button></p>
`;

这里用${donate}会把整个donate函数的源码（包括开头的async关键字）转换成字符串，插入到onclick属性中。浏览器解析时，会把这段字符串当成普通JS代码执行，自然会把async当成未定义的变量，从而抛出错误。

正确的写法应该是直接指定函数调用：onclick="donate()"，这样浏览器才会正确调用你定义好的donate函数。

修复后的完整代码 #

下面是修正后的代码，重点修改了login函数里的按钮生成部分：

async function donate() { 
  let options = { 
    contractAddress: "0x..", 
    functionName: "newDonation", 
    abi: [{ .... }], 
    params: { note: "来自Popcorn先生的感谢！" }, 
    msgValue: Moralis.Units.ETH(0.2) 
  } 
  await Moralis.executionFunction(options); 
} 

async function login() { 
  let user = Moralis.User.current() 
  if (!user) { 
    try { 
      user = await Moralis.authenticate({ 
        signingMessage: ` 登录到Popcorn！请确保您已了解相关条款。 ` 
      }) 
      await Moralis.enableWeb3() 
      console.log(user.get('ethAddress')) 
      document.getElementById("popcorn").innerHTML = ` 
        <p>钱包地址: ${user.get('ethAddress')}</p> 
        <p><button id="donate_btn" onclick="donate()">捐赠</button></p> 
      `; 
    } catch (error) { 
      console.log(error) 
    } 
  } 
} 

async function logOut() { 
  await Moralis.User.logOut() 
  console.log("已登出！") 
} 

document.getElementById("login_btn").onclick = login; 
document.getElementById("logout_btn").onclick = logOut;

关于async的重要澄清 #

你之前误以为async是第三方依赖，尝试安装async包、用require引入，这是完全没必要的：

• async是JavaScript ES6原生的关键字，专门用来定义异步函数，不需要额外安装任何包，也不需要通过require或import引入。
• 第三方的async包是一个工具库，用来处理异步流程（比如async.series、async.parallel），和原生的async关键字完全是两回事，你的代码里根本用不上它。

这样修改后，点击捐赠按钮就不会再抛出错误，能正常调用donate异步函数了。

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