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>