异步

我对异步的理解:

异步调用是用来处理同时操作一部分已经运行完成出来结果,但是另一部分仍未运行完成,以至于最后数据无法完全显示的问题。

异步的发现

之前很少使用异步,可能也是因为我学识不太够,所以敲代码敲到的比较少,这次使用异步是因为我遇到的问题:初始化时直接调用所有方法,但是最后一个方法是根据前面几个方法的运行结果得出的,前几个方法都需要调用接口,最后一个方法是调用的前几个方法中的一些零散数据,这就导致了,必须完成前几个方法后,调用最后一个方法时才可以得出想要的数据,否则最后一个方法的数据为空。

经查询得知,需要使用异步操作:
了解到,可以使用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()
  }

运行结果:

在这里插入图片描述

当然,如果两个方法结合起来使用也是可以的,大家可以试一试。

Logo

前往低代码交流专区

更多推荐