What would be the advantage of this?

It's just basic functionality that most async promise related things have.

Also helpful for webpack2 where code splitting is done with System.import which returns a promise (though might need an extra .default check?)

When we are using async components with .vue and webpack by component: resolve => require(['component'], resolve) in vue-router, but sometimes we still need async data in the .vue file, it can't resolve it very well right now.

I'm trying to use component: resolve => require(['component'], promise => promise.then(resolve)) and return a promise in the .vue file which returns a Vue component Object (componentObj) in the then callback, it works well but there's still a problem: it can't read the part of template in the .vue file, so I must apply the template string to the componentObj what makes the .vue file a little ugly.

So, my question is that is there any solution to resolve it or how about to support async promises in .vue file or how to get the part of template in the part of script😄.

@LinusBorg @yyx990803

A simple .vue:

<script>
  export default require('vue').http.get('/get-website-edit')
    .then(resp => {
      let wrapperTemplate = '';
      const components = {};

      resp.json().forEach(({data, template}, index) => {
        let component = `Component${index}`;
        wrapperTemplate += `<${component}/>`;
        components[component] = {
          data: () => data,
          template
        };
      });

      return {
        name: 'website-edit',
        template: '<ComponentsWrapper/>',
        components: {
          ComponentsWrapper: {
            template: `<div>${wrapperTemplate}</div>`,
            components
          }
        }
      };
    });
</script>

@JounQin you should not attempt to export an async component in a *.vue file. Async components are always declared where they are used instead of defined.

@yyx990803 So how to resolve async data before create a Vue instance?

And it works well with resolve => require(['component'], promise => promise.then(resolve)).

Also, I'm trying to resolve async promise on the beforeEach function in the vue-router with vuex but it means I must to save all the data in the store so that I can read the initialized data with mapGetters.

simple code:

const init = meta.init;

// 需要预先拉取数据
  Vue.http[init.type || 'get'](init.url, {
    body: {
      ...route.params,
      ...route.query
    },
    ...init.options
  }).then(res => {
    const data = res.json();
    const actions = init.actions;
    // 完成后如果是字符串表示直接将所有数据导入 action
    if (typeof actions === 'string') {
      store.dispatch(actions, data);
    } else {
      // 否则应该是对象类型, 遍历将对应数据导入对应 action
      for (const [key, value] of Object.entries(actions)) {
        store.dispatch(key, data[value]);
      }
    }
    meta.fetched = true;
    // 数据导入 store 成功后进入组件
    next();
  });

But I also think it's very bad……

@JounQin that's not the problem async components are trying to solve. Async components are designed for code splitting, not resolving data. To deal with async data, you create the instance first with a loading state, then fetch the data.

P.S. please don't hijack the issue for irrelevant questions.

I'm sorry but as I see, I and @smithb1994 are both trying finding a way to reolve async promise function before create a Vue instance so I commit the problems of myself here.

A final word: I used to create the instance first with a loading state but someone (our product designer for example) didn't like that 😅.

@JounQin if you need to fetch some data before displaying some components, it may be the time to use vue-router 😄

@posva Oh, of course I'm using it and I've tried to resolve the async promise on the beforeEach hook, but how to pass the resolved data to the initializing Vue instance on the beforeCreate hook? Then I use vuex to resolve it but I think it maybe a little high coupling and not all the data needs to save into store.

@JounQin Well that's another subject I'm sure you'll find information by searching on Google or the forums

Ok, thx and sorry again for bothering. @posva