发出 Axios 请求时加载微调器

Question

我在表单中有一个简单的按钮，我想在提出 Axios 请求时显示一个微调器。这是我的带有微调器的按钮（来自 loading.io）。

<form @submit.prevent="onSubmit" class="form-inline">
  ...
  <button type="submit" class="btn btn-primary mb-5" id="loading" :disabled="loading">
    <div class="lds-ring" v-if="loading"><div></div><div></div><div></div><div></div></div>
    Submit
  </button>
</form>

当loading 是true 时，我有条件地显示一个微调器。

我已经定义了onSubmit 方法，但是我在其中调度了一个操作并将loading 在请求之前更改为true，并在请求完成但它不起作用时更改为false。你能解释一下为什么吗？

onSubmit()

onSubmit () {
        const formData = {
          start_address: this.start_address,
          destination_address: this.destination_address,
          price_cents: this.price_cents,
          date: this.date
        }
        this.loading = true
        this.$store.dispatch('createRide', formData)
        this.loading = false
      }

create_ride

createRide({ commit }, ride){
    axios.post('/api/trips', ride)
      .then(response => {
        commit('addRide', response.data)
      })
      .then(response => {
        commit('showSuccessAlert')
      })
      .catch(error => {
        commit('showErrorAlert')
      })

Answer 1

在调度 api 调用时，您需要等待 promise 解决，因为您已经写了 loading 属性立即被设置为 false。尝试将方法更改为：

async onSubmit () {
    const formData = {
      start_address: this.start_address,
      destination_address: this.destination_address,
      price_cents: this.price_cents,
      date: this.date
    }
    this.loading = true

    // using await
    await this.$store.dispatch('createRide', formData)
    this.loading = false

    // or without await
    this.$store.dispatch('createRide', formData).then(() => {
      this.loading = false
    })
  }

vuex 存储操作也应该更新：

async createRide({ commit }, ride){
  await axios.post('/api/trips', ride)
    .then(response => {
      commit('addRide', response.data)
    })
    .then(response => {
      commit('showSuccessAlert')
    })
    .catch(error => {
      commit('showErrorAlert')
    })
})