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>
每个请求对象只在一个 servlet 的 service 方法的作用域内,或过滤器的 doFilter 方法的作用域内有效,除非该组件启用了异步处理并且调用了请求对象的 startAsync 方法。在发生异步处理的情况下,请求对象一直有效,直到调用 AsyncContext 的 complete 方法。容器通常会重复利用请求对象,以避免创建请求对象而产生的性能开销。开发人员必须注意的是,不建议在上
1. 前言 在之前的小节中我们介绍了 Vue 实例,本小节我们一起来了解一下 Vue 实例的生命周期。包括生命周期的几个阶段,以及各个阶段触发时机和作用。深入理解 Vue 的生命周期是本小的难点,同学们不仅需要知道生命周期的执行顺序,还要理解各生命周期的作用。 2. 慕课解释 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据
我正在阅读react lifecycle,有点困惑。有些人建议使用componentWillMount进行ajax调用: https://hashnode.com/post/why-is-it-a-bad-idea-to-call-setstate-immediately-after-componentdidmount-in-react-cim5vz8kn01flek53aqa22mby 在com
本文向大家介绍vue同步父子组件和异步父子组件的生命周期顺序问题,包括了vue同步父子组件和异步父子组件的生命周期顺序问题的使用技巧和注意事项,需要的朋友参考一下 关于vue组件的引入方式有两种 一、 同步引入 例子: import Page from '@/components/page' 二、异步引入 例子:const Page = () => import('@/components/pag
问题内容: 我正在阅读反应生命周期,并感到有些困惑。一些建议使用componentWillMount进行ajax调用: https://hashnode.com/post/why-is-it-a-bad-idea-to-call-setstate-immediately- after-componentdidmount-in-react- cim5vz8kn01flek53aqa22mby 在co
本文向大家介绍谈谈vue的生命周期?相关面试题,主要包含被问及谈谈vue的生命周期?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。 每一个组件或者实例都会经历一个完整的生命周期,总共分为三