uniapp子组件不能请求接口怎么办

问题背景

在使用uniapp开发中，我们不可避免地会使用到组件化的思想，将整个页面拆分成若干个子组件进行开发。但是在开发过程中，有时候我们会发现子组件无法请求接口的情况，导致数据无法正常获取。

原因分析

子组件在uniapp中本身是没有独立的生命周期的，它们的生命周期会受到父组件的影响，具体来说就是子组件的生命周期是依附于父组件的。而uniapp的异步请求是通过Vue实现的，Vue是通过数据响应式机制来支持组件内部的数据更新的。Vue 2.x版本中，子组件会在父组件进行组件内容更新之后被更新，因此在父组件进行异步请求更新数据时，子组件的生命周期可能已经结束，导致数据获取失败。

解决方案

方案一：将请求数据的逻辑放在父组件中

为了避免子组件无法请求接口的情况，可以将请求数据的逻辑放在父组件中，然后通过props将数据传递到子组件中。这样可以保证数据的及时更新，并且避免了子组件生命周期的影响，确保数据获取成功。

// 父组件中请求数据，将数据通过props传递给子组件
<template>
  <div class="parent">
    <child-component :data="data" />
  </div>
</template>
<script>
import childComponent from './childComponent'
export default {
  components: {
    childComponent
  },
  data () {
    return {
      data: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await fetch('https://xxx.com/api')
      this.data = await res.json()
    }
  }
}
</script>
// 在子组件中通过props接受数据
<template>
  <div class="child">
    <div v-for="(item, index) in data" :key="index">
      {{ item.data }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: Array
  },
  mounted () {
    console.log(this.data)
  }
}
</script>

方案二：使用provide/inject

另一种解决方案是使用provide/inject，parent组件通过provide向子组件提供一个方法或一个变量，子组件通过inject注入该变量或方法并在子组件中使用。通过provide/inject，子组件可以直接从父组件中获取数据，而无需进行异步请求获取数据。这样可以避免子组件异步获取数据的时序问题，确保子组件内部数据的及时更新。

// 父组件中provide方法提供数据
<template>
  <div class="parent">
    <child-component />
  </div>
</template>
<script>
import childComponent from './childComponent'
export default {
  components: {
    childComponent
  },
  provide () {
    return {
      data: this.data,
      fetchData: this.fetchData
    }
  },
  data () {
    return {
      data: []
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    async fetchData () {
      const res = await fetch('https://xxx.com/api')
      this.data = await res.json()
    }
  }
}
</script>
// 子组件中通过inject获取数据
<template>
  <div class="child">
    <div v-for="(item, index) in list" :key="index">
      {{ item.data }}
    </div>
  </div>
</template>
<script>
export default {
  inject: ['data', 'fetchData'],
  computed: {
    list () {
      return this.data.list
    }
  },
  mounted () {
    console.log(this.data)
  }
}
</script>

问题预防

除了以上两种解决方案外，我们还可以通过一些方法来预防子组件无法请求接口的情况：

预防一：在created生命周期请求数据

created生命周期是组件实例被创建时执行的，这个时候组件已经被初始化并且DOM渲染也完成了。所以在created生命周期内进行数据请求能够确保数据的及时更新，避免影响组件内部的数据状态，同时能够尽快地将数据传递给子组件。

export default {
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await fetch('https://xxx.com/api')
      this.data = await res.json()
    }
  }
}

预防二：使用keep-alive缓存子组件

保证数据状态不被影响，同时在数据请求成功后，子组件可能正在处于不显示状态，造成数据无法显示的情况。这时，我们可以使用keep-alive来缓存子组件的状态，即使子组件失去了焦点，也能够保持其数据状态。

<template>
  <keep-alive>
    <child-component />
  </keep-alive>
</template>

总结

子组件无法请求接口的情况，是由于子组件的生命周期被父组件影响，导致数据获取失败的原因。为了避免这种情况的发生，可以采取将数据请求的逻辑放在父组件中，或使用provide/inject等解决方案。同时，我们还可以在开发过程中，采取预防措施，比如在created生命周期请求数据，使用keep-alive缓存子组件，增加开发效率，减少不必要的时间、人力成本。