Vue created() 里同步

假如我们在Vue的勾子函数里created放了2个回调函数

 created() {
    this.initLinkGruopList()
    this.getList()
  },

 // 第一次获取链接分类列表数据
    initLinkGruopList() {
        this.urlmethod(this.url.linkManage.clasList_link, null)
          .then(res => {
            this.linkGroupData = [...res.data]
            this.rootLinkId = this.activeLinkId = res.data[0].id
            this.activeLinkName = res.data[0].name
            for (let i = 0; i < 100000; i++) {
              console.log(i)
              if (i == 100000 - 1) {
                alert('over')
              }
            }
          })
          .catch(err => {
            console.log('err', err)
          })
    },

   getList() {
      this.loading = true
      const reqPara = {
        data: {
          pageIndex: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          clasId: this.activeLinkId
        }
      }
      //   const response = await this.getLinkGruopList()
      this.urlmethod(this.url.linkManage.list_link, reqPara)
        .then(res => {
          this.data = [...res.data.list]
          this.data.forEach(item => {
            this.linkGroupData.forEach(element => {
              if (item.clasId === element.id) {
                item.clasName = element.name
              }
            })
          })
          this.pagination.total = res.data.recordTotal
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },

熟悉执行栈回调函数和异步的同学(不熟悉的可以看我前期博客，有专门讲这一块)，会知道上面例子的执行顺序，先执行initLinkGruopList()，因为这个函数是用了axios异步请求，所以返回给主线程一个回调标记，第二个getList开始执行，第二个也是返回给主线程一个回调标记，这时主线程没有了任务队列，于是看这两个回调函数哪个跑的快,就先执行哪个。

问题来了，假如我只想第一个先执行，等拿到了它的结果，再执行第二个呢？

 async created() {
    await this.initLinkGruopList()
    this.getList()
  },

 // 第一次获取链接分类列表数据
    initLinkGruopList() {
      return new Promise((resolve, reject) => {
        this.urlmethod(this.url.linkManage.clasList_link, null)
          .then(res => {
            this.linkGroupData = [...res.data]
            this.rootLinkId = this.activeLinkId = res.data[0].id
            this.activeLinkName = res.data[0].name
            for (let i = 0; i < 100000; i++) {
              console.log(i)
              if (i == 100000 - 1) {
                resolve()
              }
            }
          })
          .catch(err => {
            console.log('err', err)
          })
      })
    },
    async getList() {
      this.loading = true
      const reqPara = {
        data: {
          pageIndex: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          clasId: this.activeLinkId
        }
      }
      //   const response = await this.getLinkGruopList()
      this.urlmethod(this.url.linkManage.list_link, reqPara)
        .then(res => {
          this.data = [...res.data.list]
          this.data.forEach(item => {
            this.linkGroupData.forEach(element => {
              if (item.clasId === element.id) {
                item.clasName = element.name
              }
            })
          })
          this.pagination.total = res.data.recordTotal
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })

用async/await+promise就搞定啦，为了效果区别明显，我故意for里循环了100000次。

Vue created() 里同步

猜你喜欢