vue中,如何实现多个请求都执行完毕后才执行后续方法?

作者站长头像
站长
· 阅读数 9

父组件内遍历生成了多个子组件,子组件内有一个请求方法,该方法在父组件内调用执行。如何让所有子组件的childFunc方法都执行完毕后,才执行父元素内的nextFunc?代码如下:


子组件
<script>
export default {
  name: 'child-item',
  props: {
    itemData: {
      type: Object,
      required: true
    }
  },
  methods: {
    async childFunc () {
      const result = await this.$request.postSomething(this.itemData)
      console.log('子元素执行')
    }
  }
}
</script>
父组件
<template>
    <div>
        <child-item v-for="(item, index) in dataList" ref="childRef" :key="index" :itemData="item" />
        <button @click="postAll">点击</button>
    </div>
</template>
<script>
export default {
  name: 'parent',
  data () {
    return {
      dataList: [
        {name: 'A', age: 1},
        {name: 'B', age: 2},
        {name: 'C', age: 3},
        {name: 'D', age: 4},
        {name: 'E', age: 5}
      ]
    }
  },
  methods: {
    // 执行完所有子元素内的任务后,才执行nextFunc
    postAll () {
      this.$refs.childRef.forEach(item => {
        item.childFunc()
      })
      this.nextFunc()
    },
    nextFunc () {
      console.log('后续函数已被执行')
    },
  }
}
</script>
回复
1个回答
avatar
test
2024-07-05
  • 子组件内注册事件, 父组件进行监听并计数count, 子组件既然是遍历得到的就可以根据length计算出总共有多少接口, 并count与接口总数做对比, 两者相等就意味着所有的子组件的发完毕了

上面的是根据你当前的情况的解决方法, 更好的我觉得是: 既然子组件是遍历得到的, 子组件的那就要都发相同的接口, 那不如将同一个接口在父组件发了, 既节省了性能又方便, 将数据在传给子组件渲染就行.

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容