Go程序中fetch调用返回值无法立即更新问题求助

听起来你遇到的是异步操作里的典型坑——fetch请求是异步非阻塞的，你第一次提交表单时，代码还没等fetch返回结果就继续往下走了，导致this.found还是旧值；第二次提交时，才用上了第一次请求返回的结果，所以才需要按两次回车。

问题根源 #

当你在onSubmit里调用checkFile()发起fetch时，浏览器会把这个请求放到后台处理，同时继续执行onSubmit里的后续代码。如果你的逻辑里在fetch完成前就依赖了this.found的新值，那第一次提交时拿到的肯定是没更新的旧状态。

解决方案：用async/await等待异步操作完成 #

我们需要让checkFile()返回一个Promise，然后在onSubmit里用await等待它执行完毕，确保this.found更新后再处理后续逻辑。

1. 修改前端的checkFile方法，让它返回Promise

async checkFile() {
  try {
    // 发起fetch请求，记得根据你的实际路由和请求方式调整
    const response = await fetch('/api/check-file', {
      method: 'POST',
      body: new FormData(this.$refs.fileForm) // 假设你有表单的引用
    });
    
    // 解析返回的JSON
    const result = await response.json();
    // 这里同步更新this.found
    this.found = result.fileExists;
    return this.found;
  } catch (err) {
    console.error('检查文件时出错:', err);
    this.found = false;
    return false;
  }
}

2. 修改onSubmit方法，标记为async并等待checkFile完成

async onSubmit(event) {
  // 一定要阻止表单默认的提交刷新行为，否则页面会直接刷新，异步逻辑白做
  event.preventDefault();
  
  // 等待checkFile完成，确保this.found已经更新
  await this.checkFile();
  
  // 这里就可以放心使用更新后的this.found了
  if (this.found) {
    alert('文件已存在！');
  } else {
    alert('文件不存在');
  }
}

3. 确保Go后端正确返回JSON

还要确认你的Go路由处理函数设置了正确的响应头，避免前端解析JSON出错：

func checkFileHandler(w http.ResponseWriter, r *http.Request) {
    // 这里写你的文件存在检查逻辑，比如判断文件路径是否存在
    fileExists := false
    if _, err := os.Stat("./target-file.txt"); err == nil {
        fileExists = true
    }
    
    // 设置响应头为JSON类型
    w.Header().Set("Content-Type", "application/json")
    // 编码并返回JSON结果
    json.NewEncoder(w).Encode(map[string]bool{"fileExists": fileExists})
}

额外注意点 #

• 如果你的表单是传统的HTML表单，一定要用event.preventDefault()阻止默认提交，否则页面会刷新，之前的异步状态都会丢失。
• 确认fetch的请求路径和Go后端的路由一致，避免404错误。
• 如果涉及跨域，需要在Go后端配置CORS（不过如果是同域部署的话就不用管）。

这样修改后，第一次提交表单时，代码会等待fetch请求完成并更新this.found，就能直接得到正确的结果，不用再按两次回车啦！

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