Data pre-fetching about sub components about vue2-ssr-docs HOT 9 CLOSED

return new Promise((resolve, reject) => {
  const {app, router, store} = createApp();
  router.push(context.url);
  router.onReady(() => {
    const matchedComponents = router.getMatchedComponents();
    if (!matchedComponents.length) {
      return reject(new Error('no component matched'));
    }
    // in order to load all promises
    let targetPromises = [];
    // this cache is used to record operated components' keys, avoid infinite recursion
    let keyCache = [];
    const doAsyncData = (component) => {
      if (component.asyncData) {
        targetPromises.push(component.asyncData({
          route: router.currentRoute,
          store
        }));
      }
    };
    const recursive = (component, key) => {
      // if has key, recursived
      if (keyCache.indexOf(key) !== -1) return;
      // cache key
      keyCache.push(key);
      // do async data
      doAsyncData(component);
      // query sub components
      if (component.components) {
        Object.keys(component.components).forEach(key => {
          recursive(component.components[key], key);
        });
      }
    };
    matchedComponents.map(component => {
      recursive(component, component.name);
    });
    Promise.all(targetPromises).then(data => {
      targetPromises = [];
      keyCache = [];
      context.state = store.state;
      resolve(app);
    }).catch(error => {
      targetPromises = [];
      keyCache = [];
      reject(app);
    });
  }, reject);
});

// entry-server.js
import { createApp } from './app'
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    router.push(context.url)
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }
      // used to load Promises
      const targetPromises = [];
      // encapsulate pre-fetch datum function
      const doAsyncData = (component) => {
        if (component.asyncData) {
          targetPromises.push(component.asyncData({
            store,
            route: router.currentRoute
          }));
        }
      };
      // recursive query sub components
      const recursive = (component) => {
        doAsyncData(component);
        if (component.components) {
          Object.keys(component.components).forEach(key => {
            recursive(component.components[key]);
          });
        }
      };
      // call asyncData() in all matched componets
      matchedComponents.map(component => {
        recursive(component);
      });
      Promise.all(targetPromises).then(() => {
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}