Meteor/React 中的异步代码嵌套同步方式

Question

我一直在尝试运行在 container 组件中获取数据并将其传递给 display 组件以减少使用挂钩和加载时间。我尝试了 await/sync 和 Meteor 的 wrapAsync Here is its Docs 但我承认我并不真正理解这个功能。

N.B: 该代码是伪代码，解释了我需要应用的基本结构和功能，所有内容均已正确导入。代码结构和顺序与实际代码相同。这才是最重要的

当前结果

显示组件错误为 undefined 因为 data 或 t1Doc 为空

容器async/await

const Container = withTracker(({ id, ...rest }) => {
  const t1Handle = Meteor.subscribe("table1");
  const t2Handle = Meteor.subscribe("table2");
  const isLoading = !t1Handle.ready() && !t2Handle.ready();
  const fetchT1Documents = async () => {
  const t1Doc = await t1Collection.findOne(query);
  let t2Doc;
  const fetchT2Documents = async () => {
    t2Doc = await t2Collection.findOne(t1Doc.FK);
  }
  fetchT2Documents();
  parseXmltoJs(t1Doc, (err, result) => {
    fetchAjaxData(result,t2Doc)
    .then((data) => {
    return {
      isLoading,
      t1Doc,
      t2Doc,
      data
    }
  })
});
  }
  fetchT1Documents();
    
  return {
    isLoading,
    t1,
    ...rest,
  };
})(WithLoading(displayComponent));

加载程序

const WithLoading = (Comp) => ({ isLoading, children, ...props }) => {
  if (isLoading) {
    return <Loader />;
  } else {
    return (
      <Fade in={true} timeout={500}>
        <div>
          <Comp {...props}>{children}</Comp>
        </div>
      </Fade>
    );
  }
};

export { WithLoading };

抱歉编辑不当

Answer 1

关于这个的一些提示...

您可以创建一个发布多个 collection/query，例如 table1 和 table2。它return是一个句柄，当两个集合都有数据时就准备好了。

无需等待 collection.findOne() 调用 - 这些是对 minimongo（客户端缓存）的调用，并且 return 将在订阅加载时 null，否则将 return 数据。

您使用的模式非常好，可以将显示逻辑与肮脏的数据层分开:)

Meteor/React 中的异步代码嵌套同步方式

asynchronous code to nested synchronous manner in Meteor/React

javascript

asynchronous

async-await

meteor

reactjs