vue生命周期异步请求问题？

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

vue中，假如子组件在created发送了一个异步请求，父组件在mouted内发送一个异步请求，如何保证父组件在异步请求后能够拿到子组件异步数据。也就是说我希望在子组件和父组件异步都结束后拿到两者的值做一些操作，请问这个有什么比较好的办法嘛。

回答：

可以考虑将子组件中的异步方法改造为由父组件来调用，示例如下：

// 子组件
export default {
  created() {
    // 不在子组件的created中调用
  },
  methods: {
    // 子组件的异步方法
    async someChildMethod() {
      // 执行一些异步操作
      await asyncMethod();
    }
  }};

<!-- 父组件 -->
<template>
  <child ref="child"></child></template>

// 父组件
export default {
  async mounted() {
    // 在父组件的mounted中通过Promise.all调用父组件及子组件的异步方法
    await Promise.all([
      this.someParentMethod(),
      this.$refs.child.someChildMethod()
    ]);
    // 现在父子组件中的异步方法都已执行完成
    // Todo ...
  },
  methods: {
    // 父组件的异步方法
    async someParentMethod() {
      // 执行一些异步操作
      await asyncMethod();
    }
  }};

回答：

生命周期中发起的异步请求，并不能够有效保证。只能说在子组件请求玩数据之后通过 $emit 向父级传递事件出来，父级在单独处理一下就好了。
但是不能保证子元素接口数据返回时父级数据的数据也返回了，所以需要在两处都做处理。

子元素获取到数据之后通过 $emit 通知父级，父级触发绑定的自定义事件之后检查父级的数据是否返回，如果返回则继续处理。如果没有返回则直接 return。然后父级异步请求数据返回之后也判断一下子组件的数据已经获取到，如果没有也是直接 return。

举个简单例子就是

<template>
  <div class="parent">
    <chlid-component ref="chlid" @load="handleChlidDataLoad" />
  </div>
<template>
<script>
import axios from 'axios'
import chlidComponent from './chlidComponent'
export default {
  components: { chlidComponent },
  data(){
    return {
      list: []
    }
  },
  mounted() {
    this.fetchRemoteData()
  },
  methods: {
    fetchRemoteData(){
      axios.get('xxx').then(res => {
         this.list = res.data
         this.handleChlidDataLoad()
      })
    },
    handleChlidDataLoad() {
      if(!this.$refs.chlid?.list.length || !this.list.length) return
      //  ...
    }
  }
}</script>