Vue easytable axios data assignment problem

I have tested it and currently suspect that it is the cause of javascript asynchronous execution . The suspicion is that the assignment has already occurred before the axios is finished.
I"ll test it myself and try to solve it first.

1. I want to add a summary of footer data with VUE"s easytable. I don"t know how to get table data.
easytable description:
http://doc.huangsw.com/vue-ea.

2. Code:
tableData: is an empty array defined in VUE,data.
.
the following function is defined in VUE,Methods, for summation:
setFooterData () {

axios.get("/asset/hosts").then(res => { this.tableData = res.data })
console.log("========\n", this.tableData)
let Cost111 = this.tableData.map(item => {
return item.CostByMonth
})
...}

3. Question:
what I haven"t figured out is why the this.tableData printed by the sentence console.log after axios.get () is an empty array.
causes the Cost111 behind me to get no data. The this.tableData data in the
axios.get function is actually obtained. It"s just that I don"t know how to get the response data tableData obtained by saving this axios in the setFooterData () function.

4. I don"t know if I understand the problem. My brother is stupid and comes from a non-programmer background. They all teach themselves to make trouble, and no one can communicate. The road is very hard. I hope someone will give me some advice.

Mar.23,2021

solved, indeed because of the asynchronous execution of js, the original way of writing, before the response of axios.get is returned, the later program has already been executed. Change the
to the following to implement the function. What is not clear at present is why the this.setFoorerData () needs to be written again after this.request (), otherwise footer.

will not appear.
created () {
    axios.get('/asset/hosts').then(res => { this.tableData = res.data; this.setFooterData() })
    this.request()
    this.setFooterData()
    //
}
Menu