2021-10-25 Vue异步操作
异步我对异步的理解:异步调用是用来处理同时操作一部分已经运行完成出来结果,但是另一部分仍未运行完成,以至于最后数据无法完全显示的问题。异步的发现之前很少使用异步,可能也是因为我学识不太够,所以敲代码敲到的比较少,这次使用异步是因为我遇到的问题:初始化时直接调用所有方法,但是最后一个方法是根据前面几个方法的运行结果得出的,前几个方法都需要调用接口,最后一个方法是调用的前几个方法中的一些零散数据,这就
异步
我对异步的理解:
异步调用是用来处理同时操作一部分已经运行完成出来结果,但是另一部分仍未运行完成,以至于最后数据无法完全显示的问题。
异步的发现
之前很少使用异步,可能也是因为我学识不太够,所以敲代码敲到的比较少,这次使用异步是因为我遇到的问题:初始化时直接调用所有方法,但是最后一个方法是根据前面几个方法的运行结果得出的,前几个方法都需要调用接口,最后一个方法是调用的前几个方法中的一些零散数据,这就导致了,必须完成前几个方法后,调用最后一个方法时才可以得出想要的数据,否则最后一个方法的数据为空。
经查询得知,需要使用异步操作:
了解到,可以使用Promise和async await 两种方法,可能也有其他的,但是我查询到的这两个已经足够我解决我现有的问题了。
Promise方法:
console.log('start')
setTimeout(() => {
console.log('0')
Promise.resolve().then(() => {
console.log('1')
})
Promise.resolve().then(() => {
console.log('2')
})
}, 0)
setTimeout(() => {
console.log('3')
}, 0)
new Promise((resolve) => {
// this.init()
console.log('4')
resolve()
}).then(() => {
// this.drawLine()
console.log('5')
})
console.log('end')
这样看有点不方便,给大家缩略一下,就比较好理解了,
setTimeout是定时器,Promise是我们要用的异步方法
运行结果如下:
async await 方法:
原则就是:
在方法前加入async,在操作前加await,,就可以进行该方法时,必须进行完该操作才可以,但是如果操作换成一个复杂的方法调用名,则无法实现也异步方法名中的方法~
图片:
代码:
methods: {
async init() {
console.log(111)
const data1 = '2021-10-28'
const data2 = '2021-10-25'
const result = await this.getDaysBetween(data1, data2)
console.log(result)
},
/* 计算两日期相差天数 */
getDaysBetween (dateString1, dateString2) {
const startDate = Date.parse(dateString1)
const endDate = Date.parse(dateString2)
return (startDate - endDate) / (24 * 60 * 60 * 1000)
}
},
mounted () {
this.init()
}
运行结果:
当然,如果两个方法结合起来使用也是可以的,大家可以试一试。
更多推荐
所有评论(0)