axios默认是异步请求数据的,如果需要同步获取数据的话,需要进行设置。
下面的代码默认异步请求数据:
<template>
<div>
<el-tabs @tab-click="tabEvent">
<el-tab-pane name="tab1">Tab1</el-tab-pane>
<el-tab-pane name="tab2">Tab2</el-tab-pane>
<el-tab-pane name="tab3">Tab3</el-tab-pane>
</el-tabs>
<el-table :data="tableData">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="type" label="类别"></el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "asyncAndAwait",
data() {
return {
product_category: "",
tableData: []
};
},
methods: {
tabEvent: function(tab, event) {
var name = tab.name;
if (name == "tab2") {
this.getProductCategory();
this.getProducts(this.product_category);
}
},
//请求接口获取product_category
getProductCategory: function() {
var that = this;
axios
.get("xx/xxx/xxx")
.then(function(response) {
var data = response.data;
if (data.status == 0) {
that.product_category = data.data[0].product_category;
}
})
.catch(function(error) {
console.log(error);
});
},
//根据请求到的product_category,获取具体数据
getProducts: function(product_category) {
var that = this;
axios
.post("xx/xxx/xxx?product_category=" + product_category)
.then(function(response) {
var data = response.data;
if (data.status == 0) {
that.tableData = data.tableData;
}
})
.catch(function(error) {
console.log(error);
});
}
}
};
</script>
在以上代码中,getProducts方法是需要根据getProductCategory方法返回的product_category获取数据的,但是由于两个方法是异步的,所以获取到的products的数据不是获取到的product_category类型的数据,因此需要将以上两个方法修改为同步,如下:
<template>
<div>
<el-tabs @tab-click="tabEvent">
<el-tab-pane name="tab1">Tab1</el-tab-pane>
<el-tab-pane name="tab2">Tab2</el-tab-pane>
<el-tab-pane name="tab3">Tab3</el-tab-pane>
</el-tabs>
<el-table :data="tableData">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="type" label="类别"></el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "asyncAndAwait",
data() {
return {
product_category: "",
tableData: []
};
},
methods: {
//添加async和await方法变为同步
tabEvent: async function(tab, event) {
var name = tab.name;
if (name == "tab2") {
await this.getProductCategory();
this.getProducts(this.product_category);
}
},
//请求接口获取product_category,添加async和await方法变为同步
getProductCategory: async function() {
var that = this;
await axios
.get("xx/xxx/xxx")
.then(function(response) {
var data = response.data;
if (data.status == 0) {
that.product_category = data.data[0].product_category;
}
})
.catch(function(error) {
console.log(error);
});
},
//根据请求到的product_category,获取具体数据
getProducts: function(product_category) {
var that = this;
axios
.post("xx/xxx/xxx?product_category=" + product_category)
.then(function(response) {
var data = response.data;
if (data.status == 0) {
that.tableData = data.tableData;
}
})
.catch(function(error) {
console.log(error);
});
}
}
};
</script>
在tabEvent和getProductCategory方法中添加上async和await即可使getProductCategory获取到product_category之后再运行getProducts,获取到的数据就是product_category类型的数据