javascript - Axios 以错误的顺序进行 DELETE 和 GET

Question

我正在用 vue.js 开发一个连接到 lumen API 的小项目(正在运行)。

我目前有一个学生列表('Etudiants')，我可以在列表中单击以选择一个，然后通过工具栏中的按钮将其删除。

当学生被删除时，我正在重新加载学生列表(因为它不再是最新的)，因此我正在通过 axios 进行 2 次 api 调用。

1. 删除 http://www.url.com/etudiants (参数:idEtudiant)
2. 获取 http://www.url.com/etudiants (参数:页面)

问题是我的 API 调用没有按正确的顺序完成，如调用屏幕截图所示(使用 watterfall):

---

本题涉及3个vue文件

“Etudiants.vue”及其 2 个 child :“ListeEtudiants.vue”(学生列表)和“BarreOutilsEtudiant.vue”(工具栏)

这张简单的图片显示了 3 个文件的层次结构以及所有内容应该执行的顺序。

在我的例子中(当它不工作时) Action 编号 3，axios DELETE，发生在最后。

---

这是我的文件的内容:

学生.vue:

<template>
    <div id="etudiants" class="container-fluid h-100">
        <div class="row">
            <div class="col-3 borderR">
                <ListeEtudiants ref="list" @idEtudiantChanged="updateIdEtudiant"/>
            </div>
            <div class="col-9 bg-light">
                <BarreOutilsEtudiant v-if="idEtudiant != null" :idEtudiant="idEtudiant" @delEtudiant="delEtudiant"/>
                <InfosEtudiant v-if="idEtudiant != null" :idEtudiant="idEtudiant"/>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'

    import ListeEtudiants from '@/components/ListeEtudiants.vue'
    import InfosEtudiant from '@/components/InfosEtudiant.vue'
    import BarreOutilsEtudiant from '@/components/BarreOutilsEtudiant.vue'

    export default {
        components: {
            ListeEtudiants,
            InfosEtudiant,
            BarreOutilsEtudiant
        },
        data: function(){
            return {
                idEtudiant: null
            }
        },
        methods:{
            updateIdEtudiant(idEtudiant){
                this.idEtudiant=idEtudiant;
            },
            delEtudiant(){
                axios
                    .delete('http://82ab2617.ngrok.io/etudiants', {params: {"idEtudiant" :this.idEtudiant}})
                    .then(this.$refs.list.loadList())
                    .catch(error => console.log(error));
            }
        }
    }
</script>

ListeEtudiants.vue:

<template>
    <div id="ListeEtudiants">
        <div class="row bg-light">
            <!-- Trigger Modal Ajout Etudiant -->
            <button class="btn btn-light w-100" data-toggle="modal" data-target="#addModal">
                <font-awesome-icon icon="plus" size="1x"/>
                <span> Ajouter un Etudiant</span>
            </button>
        </div>
        <ul v-if="etudiants != null" id="list" class="row flex-nowrap list-group list-group-flush pr-0">
            <button v-for="etudiant in etudiants.data" v-on:click='$emit("idEtudiantChanged",etudiant.idEtudiant)' class="btn btn-light text-left list-group-item pl-5 py-1">{{ etudiant.nom }} {{ etudiant.prenom }}</button>
        </ul>
        <ul v-else class="row flex-nowrap list-group list-group-flush pr-0">
        </ul>
        <div class="row bg-light">
            <button class="btn btn-light col-3" v-on:click="page -= 1" :disabled="page === 1 || disabled"><font-awesome-icon icon="chevron-left" size="1x"/></button>
            <div class="align-middle col-6 my-auto">{{ page }} / {{ maxPage }}</div>
            <button class="btn btn-light col-3" v-on:click="page += 1" :disabled="page === maxPage || disabled"><font-awesome-icon icon="chevron-right" size="1x"/></button>
        </div>
    </div>

</template>

<script>
    import axios from 'axios'
    export default {
        name: "ListeEtudiants",
        data: function(){
            return {
                etudiants: null,
                maxPage:1,
                disabled:false,
                page:1,
            }
        },
        methods: {
            parseAndDisplay: function(data){
                this.etudiants = data;
                this.maxPage = data.last_page;
                this.page = data.current_page;
                this.disabled = false;
            },
            loadList: function(){
                this.disabled = true;
                this.etudiants = null;
                axios
                    .get('http://82ab2617.ngrok.io/etudiants', {params: {page:this.page}})
                    .then(response =>this.parseAndDisplay(response.data))
                    .catch(error => console.log(error));
            }

        },
        watch: {
            'page': function(newVal, oldVal){
                if((newVal === 0 && oldVal === 1) || (newVal === this.maxPage+1 && oldVal === this.maxPage)){
                    this.page = oldVal;
                }else{
                    if(oldVal !== 0 && oldVal !== this.maxPage+1) {
                        this.loadList();
                    }
                }
            }
        }
        ,
        mounted() {
            this.loadList();
        }
    }
</script>

BarreOutilsEtudiant.vue:

<template>
    <div class="row p-2 navbar-expand navbar-info bg-info">
        <button class="btn btn-info mr-5" type="button"><font-awesome-icon icon="download" size="1x"/> Télécharger le Bulletin</button>
        <button class="btn btn-info ml-auto" type="button"><font-awesome-icon icon="user-edit" size="1x"/></button>
        <button class="btn btn-danger ml-4" v-on:click="$emit('delEtudiant')" type="button"><font-awesome-icon icon="trash-alt" size="1x"/></button>
    </div>
</template>

<script>
    export default {
        name: "BarreOutilsEtudiant"
    }
</script>

<style scoped>
</style>

---

非常感谢你帮助我。

Answer 1

我认为问题出在这里:

.then(this.$refs.list.loadList())

这将立即调用 loadList 并将它返回的值传递给 then，这不是您想要的。

它应该是这样的，将它包装在一个函数中:

.then(() => this.$refs.list.loadList())