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()
  }

运行结果：

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