Vue 91 ，Element 14 ，this.$refs[xx].validate 与 async/await 异步操作的结合，表单验证和 async/await，同时使用

原创已于 2025-04-17 19:48:09 修改 · 1.3k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #elementui

于 2024-12-02 08:26:21 首次发布

Vue 同时被 2 个专栏收录

90 篇文章

订阅专栏

Element

16 篇文章

订阅专栏

前言

在前端开发中，表单验证是常见的需求之一，尤其是在提交数据到服务器之前，确保用户输入的有效性是非常重要的。Vue.js 提供了强大的表单验证工具，特别是通过 this.$refs[addCameraForm].validate 来执行表单验证。然而，在实际开发中，开发者往往需要在表单验证通过后执行一些异步操作，比如发送请求到服务器。此时，很多人希望能使用 async/await 来简化异步操作的代码。

但你会发现，尝试将 this.$refs[addCameraForm].validate 与 async/await 结合使用时，出现了一些问题。这里分享记录，为什么不能直接使用，并通过一个具体的代码示例，给出解决方案。

一. 问题分析

为什么不能直接将 async/await 与 this.$refs[addCameraForm].validate 结合使用？

1. `this.$refs[addCameraForm].validate` 是基于回调的异步操作

this.$refs[addCameraForm].validate 是一个基于回调的验证方法，它接受一个回调函数，该函数在验证完成后执行，并传递验证结果 valid。这个方法本身并不返回 Promise，而是通过回调通知验证的结果。这与 async/await 的要求冲突，因为 async/await 只能与返回 Promise 的操作一起使用。

this.$refs[addCameraForm].validate((valid) => { 
  if (valid) {
    // 验证通过，执行后续操作
  } else {
    // 验证失败
  }
});

上面这段代码演示了 this.$refs[addCameraForm].validate 的回调机制。如果我们将 async/await 直接放在回调函数中，由于 validate 本身没有返回 Promise，就无法使用 await 来等待验证结果。

2. `async/await` 和回调机制的差异

async/await 依赖于 Promise 来控制异步流程，而回调函数机制则是另一种处理异步的方式。在 async 函数中，await 会使函数暂停，直到 Promise 被解决。然而，this.$refs[addCameraForm].validate 直接执行回调并返回验证结果，并不会返回一个 Promise，导致 async/await 无法按预期工作。

二. 解决方案

将验证过程与异步操作分离

1. 解决方案

为了避免将 async/await 与回调混用，我们可以采取以下策略：保持 this.$refs[addCameraForm].validate 使用回调的形式，但将异步操作（如提交相机数据）封装在 async 函数中。这可以确保我们在验证通过之后，执行异步操作。

以下是基于你的原始代码的改进方案：

// 添加相机确定
AddCameraSure(addCameraForm) {
  // 执行表单验证
  this.$refs[addCameraForm].validate((valid) => {
    if (valid) {
      // 验证通过，调用添加相机的方法
      this.addCameraMethod();  // 调用异步操作
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},

// 添加相机的方法
async addCameraMethod() {
  try {
    // 调用后端 API，异步添加相机
    const res = await addCamera(this.addCameraForm);
    
    if (res?.code && res?.code === 200) {
      // 业务逻辑成功
      this.$message({
        message: "新增成功",
        type: "success",
        offset: 400,
        center: true,
        showClose: true,
      });
      
      // 更新相机列表
      this.callCameraList();
      // 关闭对话框
      this.cancelDialog();
    } else {
      // 业务逻辑失败
      console.error("Business logic failed:", res.code);
      this.$message.error('新增失败，请稍后再试。');
    }
  } catch (error) {
    // 捕获任何错误并显示
    console.error("Request error:", error);
    this.$message.error('请求失败，请稍后再试。');
  } finally {
    // 最后执行，无论请求成功与否
  }
},

2. 方案分析

表单验证与异步操作分开：
- this.$refs[addCameraForm].validate 继续采用回调机制，它不直接返回 Promise，而是通过回调函数通知验证结果。
- 如果验证通过，调用 addCameraMethod 方法。此方法是 async 函数，因此可以使用 await 关键字来执行异步请求。
addCameraMethod 作为异步操作：
- addCameraMethod 被设计为一个 async 函数，它使用 await 来等待异步请求的结果。
- 如果返回的 res.code === 200，表示请求成功，显示成功消息，并执行后续操作（如更新相机列表、关闭对话框）。
- 如果请求失败，显示错误消息并捕获异常。

3. 为何不能同时使用 `async/await` 和 `this.$refs[addCameraForm].validate`：

this.$refs[addCameraForm].validate 是基于回调机制的异步方法，它本身并没有返回 Promise，因此不能与 async/await 一起使用。async/await 需要操作返回 Promise 的异步函数，而回调机制与 Promise 不兼容，直接将 await 用在回调中会导致代码无法按预期执行。

三. 场景扩展

如何优化表单验证的代码结构？

如果你希望让 this.$refs[addCameraForm].validate 返回 Promise，从而能够与 async/await 结合使用，可以封装一个 Promise 来包装验证过程。以下是一个示例：

// 封装 validate 为 Promise
validateForm(addCameraForm) {
  return new Promise((resolve, reject) => {
    this.$refs[addCameraForm].validate((valid) => {
      if (valid) {
        resolve(true);  // 验证通过
      } else {
        reject(new Error('Validation failed'));  // 验证失败
      }
    });
  });
}

然后你可以这样使用：

// 添加相机确定
async AddCameraSure(addCameraForm) {
  try {
    await this.validateForm(addCameraForm);  // 使用 Promise 进行验证
    await this.addCameraMethod();  // 验证通过，调用添加相机的方法
  } catch (error) {
    console.log('验证失败:', error);
    return false;
  }
},

这种方式使得表单验证可以与 async/await 一起使用，但需要将 validate 包装为 Promise，从而实现异步控制。

四. 本文总结

在 Vue.js 中处理表单验证和异步请求时，理解回调机制与 async/await 的差异是至关重要的。虽然 this.$refs[addCameraForm].validate 和 async/await 不能直接结合使用，但通过将验证过程与异步操作分开，或通过封装 validate 为 Promise，我们可以达到预期效果，并保持代码的简洁和可维护性。

通过分离表单验证和异步操作，我们可以在保证代码逻辑清晰的同时，有效地避免常见的异步错误，确保验证通过后执行异步请求，并正确处理请求的成功与失败。

希望这里够帮助你更好地理解如何在 Vue 项目中结合表单验证与异步操作，并解决常见的问题。