当 post 请求很慢时，如何使用 axios 在 Vuejs 中更改数据属性？

Question

我有一个登录页面，在我的模板中有一个 <p v-show="loading">Loading...</p>

假设 post 请求没有错误并且很慢，那么我想在处理请求时将加载属性更改为 true。我怎样才能在下面的脚本中做到这一点？

*Edit* Added the template code

<template>
  <div id="backend-view">
    <form @submit.prevent="submit">
      <p v-show="loading">Loading...</p>
      <h3>Login Here</h3>
      <label for="email">Email</label>
      <input type="text" id="email" v-model="fields.email" />
      <span v-if="errors && errors.email" class="error">{{
        errors.email[0]
      }}</span>

      <label for="password">Password</label>
      <input type="password" id="password" v-model="fields.password" />
      <span v-if="errors && errors.password" class="error">{{
        errors.password[0]
      }}</span>
      <button type="submit">Log In</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: {},
      errors: {},
      loading: false
    };
  },
  methods: {
    submit() {
      axios
        .post("/api/login", this.fields)
        .then((res) => {
          if (res.status == 201) {
            this.$router.push("/dashboard");
          }
        })
        .catch((error) => {
          if (error.response.status == 422) {
            this.errors = error.response.data.errors;
          }
        });
    },
  },
};
</script>

Answer 1

像这样：

<script>
export default {
 data() {
   return {
    fields: {},
    errors: {},
    loading: false
   };
 },
 methods: {
  submit() {
    this.loading = true
    axios
    .post("/api/login", this.fields)
    .then((res) => {
        this.loading = false
      if (res.status == 201) {
        this.$router.push("/dashboard");
      }
    })
    .catch((error) => {
      if (error.response.status == 422) {
        this.errors = error.response.data.errors;
      }
    });
  },
 },
 };

Answer 2

您可以在调用 api 之前设置一个计时器，然后切换并加载消失。

<script>

    export default {
     data() {
       return {
        fields: {},
        errors: {},
        loading: false
       };
     },
     methods: {
      submit() {
        this.loading = true
        setTimeout(function(){ 
            this.loading = false 
        }, 2000);
        axios
        .post("/api/login", this.fields)
        .then((res) => {
          if (res.status == 201) {
            this.$router.push("/dashboard");
          }
        })
        .catch((error) => {
          if (error.response.status == 422) {
            this.errors = error.response.data.errors;
          }
        });
      },
     },
    };
</script>

Answer 3

Observation/Suggestion : 在调用 API 提交表单数据之前，您应该根据要求验证表单数据，如果验证通过然后只拨打 API 电话。

现在根据 的回答，我想在处理请求时将加载属性更改为 true

除了上述建议，您可以在提交时 this.loading = true，然后在 API 回复时您可以 this.loading = false。

submit() {
  this.loading = true;
  axios
    .post("/api/login", this.fields)
    .then((res) => {
    this.loading = false;
    if (res.status == 201) {
      this.$router.push("/dashboard");
    }
  })
    .catch((error) => {
    this.loading = false;
    if (error.response.status == 422) {
      this.errors = error.response.data.errors;
    }
  });
}

Answer 4

按如下方式使用async/await。当您在后端处理错误时，此解决方案是完美的。

  methods: {
    async submit() {
      this.loading = true;
      try{
        const res = await axios
          .post("/api/login", this.fields);
        if (res.status == 201) {
           this.$router.push("/dashboard");
        }
      }catch(error){
          if (error.response.status == 422) {
            this.errors = error.response.data.errors;
          }
      };
      this.loading = false;
    },
  },

当 post 请求很慢时，如何使用 axios 在 Vuejs 中更改数据属性？

How to change data property in Vuejs using axios when a post request is slow?

laravel

vue.js

axios

当 post 请求很慢时，如何使用 axios 在 Vuejs 中更改数据 属性？

How to change data property in Vuejs using axios when a post request is slow?

laravel

vue.js

axios

当 post 请求很慢时，如何使用 axios 在 Vuejs 中更改数据属性？