如何使用 ajax 调用使 Vuetify 规则异步并等待答案

【问题标题】：How to make a Vuetify rule async and await with a ajax call如何使用 ajax 调用使 Vuetify 规则异步并等待
【发布时间】：2019-10-14 11:35:27
【问题描述】：

我正在使用 Vuetify 表单验证来检查输入字段，并且我正在尝试确定是否可以调用 ajax get 调用并使其等待，以便我可以在规则中使用结果？

我在下面尝试过，但它似乎不起作用！

export default {
  data() {
    return {
      rules: {
        isLocationNew: value => {

          if (value == '' || value == null || value.length <= 1) {
            this.validLocation = false;
            return 'Invalid length.';
          }

          this.validLocation = true;

          var hasName = this.newLocationNameSearch(value);
          if (hasName) {
            return 'Location name already exists.';
          } else {
            return true;
          }
        }
      },


      // down in methods
      methods: {
        async newLocationNameSearch(text) {
          if (text == '' || text == null || text.length <= 1) {
            return false;
          }

          await axios.get('/api/Locations/HasLocationName', {
            params: {
              text: text,
              jobsiteId: this.jobsiteId
            }
          }).then(response => {
            return response.data;
          }).catch(function(error) {
            console.log(error)
          })

        }
      }

【问题讨论】：

标签： javascript ajax vue.js axios vuetify.js

【解决方案1】：

我找到了一个更好的解决方案，因为我需要执行类似于检查数据库中另一个电子邮件地址的检查。所以我使用了“错误消息”

喜欢这个

@input="newLocationNameSearch($event)" :error-messages="newLocationErrorMessages"

这样，输入的每个字符都将在“newLocationNameSearch()”中检查，然后我从“newLocationErrorMessages”中填充和删除项目以显示给用户！

【讨论】：

【解决方案2】：

newLocationNameSearch 是一个异步函数。异步函数返回 Promise，所以当你编写时

var hasName = this.newLocationNameSearch(value);

hasName 被设置为一个承诺，它总是真实的。

你需要这样的东西：

    isLocationNew: async value => {

      if (value == '' || value == null || value.length <= 1) {
        this.validLocation = false;
        return 'Invalid length.';
      }

      this.validLocation = true;

      var hasName = await this.newLocationNameSearch(value);
      if (hasName) {
        return 'Location name already exists.';
      } else {
        return true;
      }
    }

请记住，无论何时调用 isLocationNew，都需要等待它。

此外，newLocationNameSearch 方法在等待时实际上并不返回值。

      await axios.get('/api/Locations/HasLocationName', {
        params: {
          text: text,
          jobsiteId: this.jobsiteId
        }
      }).then(response => {
        return response.data;
      }).catch(function(error) {
        console.log(error)
      })

在 .then() 调用的回调中包含 return 语句。 newLocationNameSearch 然后不返回任何内容，这意味着它返回 undefined，这是虚假的。

好消息是 async/await 意味着我们不必再为then 回调而烦恼。

我们可以改为写

try {
     var response = await axios.get('/api/Locations/HasLocationName', {
        params: {
          text: text,
          jobsiteId: this.jobsiteId
        }
      });

      return response.data;

} catch (error) {
    console.log(error)
}

【讨论】：

所以我还需要在方法调用和 axios 调用中保持 async 和 await 吗？
是的，实际上我注意到原始代码中的另一个错误。一开始异步/等待可能会很棘手。编辑传入。
是的，我现在意识到了这一点。我收到一条错误消息，上面写着“vuetify.js:25169 [Vuetify] 规则应该返回一个字符串或布尔值，而不是接收到 'object'”
@user1186050 啊，你正在使用 vuetify ......这可能会改变一些事情
@user1186050 是的 vuetify 不支持开箱即用的异步验证。在github 上有一个功能请求，否则您可以尝试使用建议的解决方法here

【解决方案3】：

methods: {
  fetchUserData: async function() {
      const response = await fetch(
            "https://jsonplaceholder.typicode.com/users"
      );
      this.users = await response.json();
}

你可以像这个例子一样使用它。

【讨论】：