嵌套async异步函数是否会显著降低前端表单提交性能？

你写的这种嵌套async函数的写法不会造成显著性能下降。
JS里函数声明、嵌套的开销是微秒级别的，和你代码里两次HTTP请求（获取token、提交表单）的网络耗时比，差距在三个数量级以上，完全不会成为性能瓶颈，这点开销用户根本感知不到。

你现在这套「提交时才获取token」的思路是对的，从根源上避免了token提前过期的问题，唯一的问题不是性能，是写法上混写了then和async/await，还嵌套声明了不必要的内部函数，可读性差，也漏了错误处理，和性能损耗无关。

可直接优化的点 #

• 不用在handleSubmit里嵌套声明getTokens、submitForm两个内部函数，直接把整个提交处理函数改成async即可，逻辑平铺更好维护
• 补上异常捕获逻辑，不然获取token失败、提交表单失败都会抛出未捕获的Promise错误，用户拿不到任何反馈
• 不要混用then链和async/await，统一用await写异步逻辑，可读性高很多

优化后的参考代码：

async function handleSubmit(e) {
  e.preventDefault();
  try {
    // 提交触发时再拉取token，彻底避免提前过期
    const { data: tokenData } = await axios.get("example.com/get-token/306/");
    const formData = new FormData();
    formData.append("token", tokenData.message);
    formData.append("session", tokenData.session);
    formData.append("email", email.current.value);

    // 提交表单
    await axios.post(
      "https://example.com/submit/306/",
      formData,
      { headers: { "Content-Type": "multipart/form-data" } }
    );
    // 此处写提交成功后的业务逻辑：提示成功、跳转页面、重置表单等
  } catch (error) {
    // 统一处理异常：提示网络错误、提交失败、token失效重试等
    console.error('表单提交异常:', error);
  }
}

关于体验优化的补充 #

如果觉得提交时先拉token再提交会多一次等待，可以折中做预取优化，不用等页面加载就拉，也不用等用户点提交才拉：

• 监听用户的交互行为，比如用户第一次聚焦邮箱输入框、输入完符合格式的邮箱内容时，提前发请求拉取token，等用户点提交按钮时，token大概率已经请求完成，能省掉一次等待时间
• 因为预取时机离用户实际提交的间隔非常短，token基本不会过期；兜底逻辑可以在提交前判断下token的剩余有效期，如果快过期就重新拉取，完全规避过期问题

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