Question

基本上，我在页面上有多个组件，这些组件拥有范围和获取某些数据的多个服务。

最佳实践是，例如，如果某个用户操作启动的一个较晚的组件需要其他组件状态的某些条件以及将来需要解决的多个多重问题，则这是最佳实践。

有关伪语言的简单示例：

   component on click => 
      if( data1.fetched && data2.fetched && component1.action1
          && component2.action2 ...)
      do something ();
      wait for it;

我需要指出的情况是，在组件初始化并附加到事件侦听器之前，所有条件都已经解决，并且它们的事件已经发出，并且在某些情况下，所有这些条件甚至都没有启动，在大多数情况下是组合的，所以actino组件必须了解过去和未来。

目前，我可以通过这样的等待功能简单地实现此目的：

  component on click =>
        wait_for([data1.fetched && data2.fetched && component1.action1 && component2.action2],
                  callback do your staff)

  wait_for(collection,callback) =>
     collection.each => wait(item)
     count = collection.count
     finished = 0;

     wait(item) =>
        if(item) 
          respond(item)
        else
          setTimeout => wait(item), 1000

     respond(item)
       finished++
       if(count == finished)
          callback do your staff

基本上，我不能执行事件侦听器，因为某些组件已按照我所说的在发出这些组件后很长时间进行了初始化，但是我不了解Promises，它们如何处理过去已经解决的事情，例如完成的获取和状态更改。 / p>

在实际使用示例中，假设我们有一个组件google map，它在其中一个组件的google maps库初始化为其他组件之后很久就插入了用户操作，但这需要另一个依赖，例如google place api来获取一个组件。还需要等待组件地址字段中的状态参数发出某些操作（但是出于其他原因，需要在该操作之前初始化组件）

基本上的问题是等待多个异步条件以继续对javascript进行某些操作的最佳实践是什么，并且是否有专门针对此的库（没有jQuery，仅此库，如axios）

Answer 1

您基本上是在描述诺言的完美用例。是的，即使您已经答应了诺言，即使诺言已经解决/被拒绝，诺言仍将无限期地可用。例如：

let pr1 = new Promise((resolve, reject) => {
  console.log("I'm about to resolve right now");
  resolve('hello world');
});

setTimeout(()=> {
  pr1.then(x=> console.log(x));
}, 5000);

pr1几乎立即解决，并且在setTimeout触发5秒钟后，.then仍然能够利用已解决的Promise的返回值。 / p>

当然，如果Promise尚未解决（例如，如果我们在pr1中有一个过程耗时10秒），则.then会等到Promise解决之后再运行。

Answer 2

这是一个好问题。考虑到重点是异步编程，它更具挑战性，但是JS充满了惊喜和强大的语言！我觉得，您将需要单身人士并保证解决上述问题。单例以保持component1.action1之类的动作状态，并明显承诺异步执行。

调用单例模式的示例如下（如果您知道angularJS，请像factory或service那样思考它：

var myInstance = (function() {
  var privateVar = '';

  function privateMethod () {
    // ...
  }

  return { // public interface
    publicMethod1: function () {
      // all private members are accesible here
    },
    publicMethod2: function () {
    }
  };
})();

就异步库而言，从来没有单一的“正确方法”。我列出了我最喜欢的FYR：

async.js：当我们需要协调一系列异步操作时，Async.parallel（）很有用，这些异步操作可以彼此独立地执行，并且当所有任务都需要采取一些行动时已经成功完成。
Bluebird.js是另一个用于异步操作的编写良好的库。请按照此处的备忘单-https://devhints.io/bluebird

Javascript-取决于多个异步过程的多个隔离操作的最佳实践

2 个答案: