如何使用多服务调用来呈现UI

Question

我只是对Javascript有一个一般性问题。如果我必须为一个UI调用两个服务，并且这两个服务调用都有自己的回调，但是必须在两个回调都完成执行之后才呈现UI模板，那么最佳的Javascript做法应该是什么？ >

invokeServices() {
    invokeService1(param1, param2, svcCallback1);
    invokeService2(param1, param2, svcCallback2);
    //where to render the template???
}

function svcCallback1 (){
    //where to render the template???

}

function svcCallback2 (){
    //where to render the template???

}

Answer 1

这篇文章可能会有所帮助：Marko vs React: An In-depth Look。具体来说，请在foreach loop上查找有关如何使用Promise和toEqual(jasmine.objectContaining)标签以延迟渲染直到所有数据都存在的部分。

Async

Answer 2

1。跟踪回调的完成

function invokeServicesAndRender() {
  let remaining = 2;
  let service1Data;
  let service2Data;

  invokeService1(param1, param2, (err, data) => {
     service1Data = data;
     if (!--remaining) done();
  });

  invokeService2(param1, param2, (err, data) => {
     service2Data = data;
     if (!--remaining) done();
  });

  function done() {
     // all data is here now, we can render the ui
  }
}

2。承诺并使用Promise.all

Node有一个内置的方法来实现回调：util.promisify

const promisify = require('util').promisify;
const promiseService1 = promisify(invokeService1);
const promiseService2 = promisify(invokeService2);

function invokeServicesAndRender() {
  Promise.all([
    promiseService1(param1, param2),
    promiseService2(param1, param2),
  ]).then(([service1Data, service2Data]) => {
    // all data is here now, we can render the ui
  });
}

3。如果您使用的是Marko，请立即进行渲染并将promise传递给模板

我看到您标记了这个问题marko，因此我将提到，对于Marko，建议立即开始渲染，而仅等待渲染实际需要数据的块。这使您可以更快地向用户冲洗内容。

const promisify = require('util').promisify;
const promiseService1 = promisify(invokeService1);
const promiseService2 = promisify(invokeService2);

function invokeServicesAndRender() {
  let service1DataPromise = promiseService1(param1, param2);
  let service2DataPromise = promiseService2(param1, param2);
  template.render({ service1DataPromise, service2DataPromise });
}

在模板中，您可以使用<await>标签来等待需要的数据：

<h1>Hello World</h1>
<p>this content gets rendered immediately</p>

<await(service1Data from input.service1DataPromise)>
  <!-- render content here that needs the service data -->
</await>