一般情况下,数据库操作和网络请求都是异步的;
执行完getCoachList()后再执行setTableData()方法
一、Promise异步编程
// getCoachList()方法
// Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject,它们是两个函数,由 JavaScript 引擎提供,不用自己部署;
getCoachList() {
return new Promise((resolve, reject) => {
let occupationType = ''
if(this.occupationType != 'all'){
occupationType += `?occupationType=${this.occupationType}`
}
this.$axios.get(`${api_host}/lego/manage/coach/arrangement/overview${occupationType}`).then(res => {
let data = res.data.data
this.arrangementStatuses = data.arrangementStatuses
this.manageDayArrangements = data.manageDayArrangements
this.weekStartDate = moment(data.weekStartDate)
this.arrangementStatuses.forEach(() => {
this.isHighlighted.push(false)
})
resolve(resolve)
}).catch(err => {
reject(err)
})
})
}
// setTableData()方法
setTableData() {
let arr = []
this.timetable.forEach((item, index) => {
let dayArr = this.manageDayArrangements.filter(day => day.dayDuration == item)
let struct = {
time: item,
'0': '',
'1': '',
'2': '',
'3': '',
'4': '',
'5': '',
'6': ''
}
if(dayArr.length) {
dayArr.forEach(item => {
struct[item.weekDay - 1] = item.concatCoachNames
})
}
arr.push(struct)
})
this.tableData = arr
},
formatD(i) {
return this.weekStartDate.add(i < 1 ? i : 1, 'days').format('MM.DD')
}
// 可以确保拿到getCoachList()方法执行的结果后再执行setTableData()方法
// 使用.then()方法的前提是getCoachList()需返回Promise对象
changeCoachList() {
this.getCoachList().then(() => {
this.setTableData()
})
// 下面的方法并不能保证getCoachList()执行完后才能执行setTableData()
changeCoachList() {
let promise = new Promise((resolve, reject) => {
this.getCoachList()
}).then(res=>{
this.setTableData()
})
}
二、Promise.all
- Promise.all 接收一个 promise对象的数组作为参数,当这个数组里的所有 promise 对象全部变为 resolve 或 reject 状态的时候,它才会去调用 then 方法;
- Promise.race其参数也跟 Promise.all 一样是一个数组,只是数组中的任何一个 promise 对象如果变为 resolve 或者reject 的话,该函数就会返回,并使用这个 promise 对象的值进行 resolve 或者 reject;
created() {
let timePro = this.getTimeTable()
let coachPro = this.getCoachList()
Promise.all([timePro, coachPro]).then(res => {
this.setColumns()
this.setTableData()
})
}
三、async/await
async changeCoachList(){
await this.getCoachList()
this.setTableData()
}