5.Vue-axios异步的问题

axios 的执行方式

1：定义测试数据和方法。

<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var vue = Vue.createApp({
        data() {
            return {
            }
        },
        created() {
            console.log("111");
            this.loadCollect1();
            console.log("333");
            this.loadCollect2();
            console.log("555");
        },
        methods: {
            loadCollect1() {
                axios.get("/api/collect/load").then(res => {
                    console.log("222");
                })
            },
            loadCollect2() {
                axios.get("/api/collect/load").then(res => {
                    console.log("444");
                })
            },
        }
    }).mount("#app");
</script>

2：测试结果，说明 axios 一种异步非阻塞的并行执行方式。

3：所以以下代码中的 pageNo 和 total 是获取不到的。

<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var vue = Vue.createApp({
        data() {
            return {
                pageNo: 0,
                total: 0
            }
        },
        created() {
            this.loadCollect1();
            console.log(this.pageNo);
            console.log(this.total);
            this.loadCollect2();
        },
        methods: {
            loadCollect1(){
                axios.get("/api/collect/load").then(res=>{
                    this.pageNo = res.data.pageNo;
                    this.total = res.data.total;
                })
            },
            loadCollect2(){
                axios.get("/api/collect/load").then(res=>{
                })
            },
        }.mount("#app");
</script>

解决方案 1：直接在方法中的回调函数获取

<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var vue = Vue.createApp({
        data() {
            return {
                pageNo: 0,
                total: 0
            }
        },
        created() {
            this.loadCollect1();
            this.loadCollect2();
        },
        methods: {
            loadCollect1() {
                axios.get("/api/collect/load").then(res => {
                    console.log("222");
                    this.pageNo = res.data.pageNo;
                    this.total = res.data.total;
                    this.saveLog(this.pageNo, this.pageSize);
                })
            },
            loadCollect2() {
                axios.get("/api/collect/load").then(res => {
                    console.log("444");
                })
            },
            saveLog(pageNo, pageSize) {
                console.log(pageNo, pageSize);
            },
        }
    }).mount("#app");
</script>

解决方案 2：函数行为入参回调函数获取

<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var vue = Vue.createApp({
        data() {
            return {
                pageNo: 0,
                total: 0
            }
        },
        created() {
            this.loadCollect1(function () {
                this.saveLog(this.pageNo, this.pageSize);
            });
            this.loadCollect2();
        },
        methods: {
            loadCollect1(callbackFn) {
                axios.get("/api/collect/load").then(res => {
                    console.log("222");
                    this.pageNo = res.data.pageNo;
                    this.total = res.data.total;
                    callbackFn && callbackFn(res);
                })
            },
            loadCollect2() {
                axios.get("/api/collect/load").then(res => {
                    console.log("444");
                })
            },
            saveLog(pageNo, pageSize) {
                console.log(pageNo, pageSize);
            },
        }
    }).mount("#app");
</script>

解决方案 3：async + await

<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var vue = Vue.createApp({
        data() {
            return {
                pageNo: 0,
                total: 0
            }
        },
        async created() {
            try {
                var res = await this.loadCollect1();
                this.saveLog(res.pageNo, res.total);
            } catch (e) {
            }
            this.loadCollect2();
        },
        methods: {
            loadCollect1() {
                console.log("222");
                return axios.get("/api/collect/load");
            },
            loadCollect2() {
                axios.get("/api/collect/load").then(res => {
                    console.log("444");
                })
            },
            saveLog(pageNo, pageSize) {
                console.log(pageNo, pageSize);
            },
        }
    }).mount("#app");
</script>