无法与AXIOS一起使用的验证函数的返回

hmmo2u0o  于 2022-10-21  发布在  iOS
关注(0)|答案(2)|浏览(121)

我正在尝试做一个表格,在那里用户可以更改他们的帐户的电子邮件地址。我想让他们输入他们的密码来验证他们。所以在调用validate函数之前,我有一个执行电子邮件更改的函数。如果返回值为真,则继续。如果没有,则会出现错误。但是,当使用正确的凭据测试它时,它总是进入else,尽管我得到了有效的axios响应。

emailChange() {
      if (this.validate() == true) {
        var data = JSON.stringify({
          email: this.email,
        });
        this.put(data);
      } else {
        this.error = "Falsches Passwort";
        this.snackbar = true;
      }
    },

    validate() {
      var data = JSON.stringify({
        identifier: this.loggedInUser.email,
        password: "123456",
      });

      var config = {
        method: "post",
        url: "http://192.168.190.112:1337/api/auth/local",
        headers: {
          "Content-Type": "application/json",
        },
        data: data,
      };

      this.$axios(config)
        .then(function (response) {
          console.log(JSON.stringify(response.data));
        })
        .then(function () {
          return true;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
nzrxty8p

nzrxty8p1#

函数返回未返回以进行验证。Axios是异步的,您需要承诺或回调。

this.$axios(config)
        .then(function (response) {
          console.log(JSON.stringify(response.data));
        })
        .then(function () {
          return true; // this does not return to validate(). it returns just here
        })
        .catch(function (error) {
          console.log(error);
        });

这是实现它的一种方式。

emailChange() {
      this.validate((error, isValid) => {
        if (isValid) {
          var data = JSON.stringify({
            email: this.email,
          });
          this.put(data);
        } else {
          this.error = "Falsches Passwort";
          this.snackbar = true;
        }
      })
    },

    validate(callback) {
      var data = JSON.stringify({
        identifier: this.loggedInUser.email,
        password: "123456",
      });

      var config = {
        method: "post",
        url: "http://192.168.190.112:1337/api/auth/local",
        headers: {
          "Content-Type": "application/json",
        },
        data: data,
      };

      this.$axios(config)
        .then(function (response) {
          console.log(JSON.stringify(response.data));
        })
        .then(function () {
          callback(null, true);
        })
        .catch(function (error) {
          callback(error);
        });
    }
xzlaal3s

xzlaal3s2#

我想你误解了.then()的目的。
创建请求不是即时的,它的完成取决于您向其请求数据的服务器是否会向您发回响应。因此,AXIOS使用异步代码为您提供一个Promise,它将在请求完成后解析。
每当解析请求时,都会调用.then()函数中的回调(如果连接速度较慢,则可能需要数秒)。
包含您的RETURN语句的回调可能会在您的验证函数结束几秒钟后被调用,这不是您想要的。
我建议使用async/await作为替代。
将函数声明为async会使其在任何情况下都返回承诺,这是您想要的,await等待承诺解析后再继续。
这里有一个简单的例子

// This function returns a promise!
async validate() {
  // axios.get() returns a promise, so we use await to wait until it's resolved
  let response = await axios.get("url") 

  // return the data (this is not a promise)
  // since the method is async, this will be automatically converted into a promise
  // that will resolve when the method returns something
  return response;
}

// you can only use "await" in async functions
async emailChange() {
  // wait until this.validate() is finished before continuing
  if(await this.validate() == true) {
    // etc.
  }
}

异步/等待通常是执行此操作的首选方法,因为它比使用.Then()链接回调要干净得多
希望这能有所帮助

相关问题