删除后删除的元素一直存在，直到刷新 - VueJS

Question

我正在尝试创建一个简单的应用程序，其中我有一个提供者列表并想要添加/删除它们......这两种情况都存在同样的问题

当我尝试删除或添加元素以及尝试添加元素（提供者）时

情况如下：

Provider.vue：* 从 API 加载提供程序（就这么简单）

<template lang="html">
 <div class="container">
   <h1 class="h2">{{ $t('default.titles.providers') }}</h1>
     <button class="btn btn-success my-3 float-right" @click="addProvider">{{ $t('default.buttons.add') }}</button>
     <template v-if="showError">
       <div class="clearfix"></div>
       <tw-loading-error :message="this.error"></tw-loading-error>
     </template>
     <template v-else>
       <table class="table table-hover table-sm">
         <thead>
           <tr>
             <th scope="col">#</th>
             <th scope="col">{{ $t('default.provider.name') }}</th>
             <th scope="col"></th>
             <th scope="col"></th>
             <th scope="col"></th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(provider, index) in providerList" :key="index">
             <th scope="row">{{index+1}}</th>
             <td>{{provider.provider_name}}</td>
             <td :title="$t('default.buttons.edit')">
               <router-link :to="{ name: 'edit-provider', params: { provider } }">
                 <Edit2Icon
                   class="pointer">
                 </Edit2Icon>
              </router-link>
             </td>
             <td :title="$t('default.buttons.delete')">
               <router-link class="delete" :to="{ name: 'delete-provider', params: { provider } }">
                   <DeleteIcon
                     class="pointer">
                   </DeleteIcon>
               </router-link>
             </td>
             <td :title="$t('default.buttons.add-client')">
               <router-link class="edit" :to="{ name: 'add-provider-user',
                                                params: {
                                                  provider_id: provider.id_provider,
                                                  provider_name: provider.provider_name
                                               }}">
                 <UserPlusIcon class="pointer"></UserPlusIcon>
               </router-link>
             </td>
           </tr>
         </tbody>
       </table>
     </template>
 </div>
</template>

<script>
  import ProviderService from './../../../services/provider.service'
  import { Edit2Icon, DeleteIcon, UserPlusIcon } from 'vue-feather-icons'
  import LoadingError from './../../shared/alerts/LoadingError.vue'

  export default {
    name: "Provider",
    data() {
      return {
        providerList: [],
        error: '501: cannot load the providers :(',
        showError: false
      }
    },
    components: {
      'tw-loading-error': LoadingError,
      Edit2Icon, DeleteIcon, UserPlusIcon
    },
    methods: {
      getProviders() {
        ProviderService.getProviders().then(
          response => {
            this.providerList = response.data
          },
          error => {
            this.showError = true
            this.error = error
          }
        )
      },
      addProvider() {
        this.$router.push({name: "add-provider"})
      },
    },
    mounted() {
      this.getProviders();
    }
  }
</script>

<style lang="css" scoped>
.pointer {
  cursor: pointer;
}
.delete {
  color: red;
}
</style>

provider.service.js：* 非常简单......我要么获取所有提供者，要么删除一个提供者

import axios from '../axios/axios-conf'
import authHeader from './auth-header';

class ProviderService {
  async getProviders() {
    const response = await axios.get('/providers', { headers: authHeader() })
    return response
  }

  async deleteProvider(id){
     try {
       return await axios.delete('/provider/delete/'+id)
     } catch (error) {
       return error
     }
  }
}

 export default new ProviderService()

DeleteProvider.vue：*这是罪魁祸首

<template lang="html">
 <div class="container">
   <h1 class="h2">{{$t('default.titles.delete')}} {{provider.name}}?</h1>
      <div class="container">
        <button class="btn btn-danger" @click="deleteProvider(provider.id)">{{$t('default.buttons.yes')}}</button>
        <button class="btn btn-sm btn-secondary" @click="goBack">{{$t('default.buttons.no')}}</button>
      </div>
 </div>
</template>

<script>
//  import axios from './../../../axios/axios-conf'
  import ProviderService from './../../../services/provider.service'

  export default {
    name: "DeleteProvider",
    data() {
      return {
        provider: {
          id: null,
          name: null
        }
      }
    },
    components: {
    },
    methods: {
      async deleteProvider(id){
        let c = confirm("Do you really want to delete it? You will not be able to restore this data again!")
        if(c){
          this.delete(id)
              .then(success => {
                return success
              })
              .catch(error => {
                return error
              })
          this.goBack()
        }
      },
      async delete(id){
        let response = await ProviderService.deleteProvider(id)
        return response
      },
      checkParams(){
          if(JSON.stringify(this.$route.params) === '{}'){
            this.goBack()
          }
      },
      goBack(){
        this.$router.push({ name: 'provider'})
      }
    },
    mounted() {
      this.provider.name = this.$route.params.provider.provider_name
      this.provider.id = this.$route.params.provider.id_provider
    },
    created() {
      this.checkParams()
    }
  }
</script>

<style lang="css" scoped>
.pointer{
  cursor: pointer
}
</style>

API 完美地工作.. 他们做了预期的事情.. 问题发生了，当我尝试删除提供者时，VueJS 将我（路由器）重定向到提供者列表的速度如此之快，以至于元素不会消失（那个已删除）。只有在我刷新页面后（通过 F5 或转到另一个页面并返回以再次呈现它）它才会被投影。

所以事实是，它已成功删除，但页面没有等待或删除立即投影它。

我做错了什么？我的所有功能的代码中确实有 async/await（绝望的情况需要采取绝望的措施：D）

PS：值得一提：它只是偶尔发生..有时它工作正常（所以元素没有显示..有时我必须刷新页面）

谢谢

Answer 1

this.goBack() 未正确等待异步函数完成。下面的this.delete(id) 行和this.goBack() 行并行执行，因为delete 是一个异步调用。

另外，您还可以使用try...catch 块而不是使用承诺链接。看看我下面的变化：

async deleteProvider(id){
        let c = confirm("Do you really want to delete it? You will not be able to restore this data again!")
        if(c){
          try{
             const success = await this.delete(id)
             return success;
           } catch(error){
             return error;
           } finally {
              this.goBack(); // If you want to go back only on success, move this line inside the try block before the `return`.
           }
        }
      }