Await async component lifecycle hooks

[RashadSaleh]

What problem does this feature solve?

If a user needs to implement a lifecycle hook that depends on async operations, vue should respect the async nature of the implemented hook and await it in vue land.

What does the proposed API look like?

The API does not change; only how it works now by awaiting async hooks.

[posva]

So you want

created () {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('created')
            resolve()
        })
    })
},
mounted () {
    console.log('mounted')
}

to display

created
mounted

?

When creating a feature request, please add a real-world use case to make the request worth being implemented.

[yyx990803]

While this is theoretically a cool idea, this requires a fundamental rethink/rewrite of the architecture to achieve, and can potentially break a lot of logic that relies on the synchronous nature of lifecycle hooks. So the benefits must be substantial in order to justify that change - otherwise this can only be considered when we plan to do a full breaking upgrade, which is unlikely to happen very soon.

Closing for now, but feel free to follow up with more concrete reasoning / use cases / implications.

[RashadSaleh]

@posva Understood -- I apologize. My actual use case is one where I have a UserPage component that receives a user_id from the page route parameters (through this.$route.params), then fetches the actual user data from the database on the server using a command like:
this.user = await client.get({type: 'user', id: this.$route.params.id})
where this.user refers to a user field in the data part of the UserPage component.

Ideally, I want that line of code to be executed after the component has been created (so that this.$route.params is available) but before the component is actually mounted so that in my template I can safely use user interpolations without getting any errors about undefined values.

@yyx990803
I might be a noob here, but shouldn't the only change be adding the await keyword before the call for lifecycle hooks like mounted, etc, in Vue land?

[RashadSaleh]

This is the actual code that I want to be awaited:

  beforeMount: async function() {
       this.user = await client.get({type: 'user', id: this.$route.params.id});
    }

Which would be part of the UserPage component.

[posva]

No worries! I was imagining that use case. It's better to handle it as described in vue-router docs as it opens different ways of displaying loading state. You can already wait for the data to be there before rendering the component btw.

[RashadSaleh]

OK that makes sense. Now, however, what if I have a user component that is a stripped down version of the user page (say, like the component that appears when you hover over a user's name on facebook and "peek" into their profile), then the router is not involved here and the id will be passed as a property to the component.

[RashadSaleh]

Taking the big picture view here, functions in JavaScript can now be either synchronous or asynchronous, and that lifecycle hooks being functions, and the way we think of them as functions, should support asynchronousity (as demonstrated by my use case and intuitive "reach" for the approach I am using here).

[posva]

You have many ways of doing it. The simplest one is using a variable that starts as null, fetch the data and set it, toggling the actual component (because of a v-if). A more exotic version would be a function that resolves the component and use a <component :is="myDynamicComp"/> 😄
But please, don't hijack the issue into a question 😉 use the forum or discord for that

[RashadSaleh]

No I really don't want help with the code! Actually I already have implemented workarounds very similar to your suggestions. What I am trying to say is that it is much more intuitive to just use JS async features.

[RashadSaleh]

The part I didn't realize is that asynchronous and synchronous code are fundamentally different in nature, so that synchronous code cannot be forced to adhere to asynchronous code without fundamentally changing itself to asynchronous code. yyx990803 saw it immediately but it took me some time to understand his comment completely. Thanks for your time guys and sorry if there was a miscommunication on my part somewhere through the way.

[sj82516]

I have some use case here and would like to get some suggestion and workaround method.

MainPage.vue is my main container. I call ajax "/init" at beforeCreate to get user info and then commit to Vuex.store.
Content.vue is the child inside MainPage.vue. I would like to call different api calls at mounted stage according to user's role which come from Vuex.store.

If the lifecycle call in async/await flow, it would follow the order
Parent beforeCreate -> Parent create -> Child beforeCreate -> Child create -> Child mounted .... (If I understand correctly about component lifecycle).

But currently I cannot get user info at Content.vue, how can I get workaround now?
I would like to keep "/init" api called inside MainPage.vue because It is used in many pages(container in Vue-Router).

posted question on stackoverflow

Thanks

[manast]

a hackish workaround for what is worth:

{
  created: function(){
    this.waitData = asyncCall();
  },
  mounted: function(){
    this.waitData.then(function(data) { ... })
  }
}

[fifman]

A possible more "flat" solution:

{
    async created () {
        let createdResolve = null
        let createdReject = null
        this.createdPromise = new Promise(function(resolve, reject){
            createdResolve = resolve
            createdReject = reject
        })
        await asyncCall1()
        await asyncCall2()
        ...
        createdResolve(someResult)
    }
    async mounted () {
        let result = await this.createdPromise
        ...
    }
    data () {
        return {
            createdPromise: null
        }
    }
}

[darren-dev]

Is this not a thing yet?