Question

我正在使用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)
          })

        }
      }

Answer 1

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，这是错误的。

一个好消息是异步/等待意味着我们不必再为then回调而烦恼了。

我们可以改写

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

      return response.data;

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

Answer 2

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

您可以像本例一样使用它。

Answer 3

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

像这样

@ input =“ newLocationNameSearch（$ event）”：error-messages =“ newLocationErrorMessages”

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

如何使Vuetify规则异步并通过Ajax调用等待

3 个答案: