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

Z时代
2024-02-15
分类：IT

父组件内遍历生成了多个子组件，子组件内有一个请求方法，该方法在父组件内调用执行。如何让所有子组件的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>

回答：

子组件内注册事件, 父组件进行监听并计数count, 子组件既然是遍历得到的就可以根据length计算出总共有多少接口, 并count与接口总数做对比, 两者相等就意味着所有的子组件的发完毕了

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

回答：

<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
    async postAll () {
      // 这改成Promise.all和map就行
      // 要保证childFunc是返回一个promise
      await Promise.all(this.$refs.childRef.map(item => {
        return item.childFunc()
      }))
      this.nextFunc()
    },
    nextFunc () {
      console.log('后续函数已被执行')
    },
  }
}</script>