时间戳

首页 > 解决方案 > Javascript - 依赖于多个异步进程的多个隔离操作的最佳实践

javascript - Javascript - 依赖于多个异步进程的多个隔离操作的最佳实践

问题描述

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

什么是最佳实践，例如，如果在某些用户操作上启动的一个后期组件需要来自其他组件的状态的一些条件，并且需要解决一些未来的多个提取。

对于伪语言的简单示例：

   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，它们如何处理过去已经解决的事情，比如完成获取和状态更改。

在实际使用示例中，假设我们有一个组件谷歌地图，在它的一个依赖项谷歌地图库为其他组件初始化很久之后，它被插入到用户操作中，但是这个需要另一个依赖项，例如谷歌放置 api 来获取一个也需要等待来自组件地址字段的状态参数发出一些动作（但由于其他原因需要在该动作之前初始化组件）

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

标签： javascriptasynchronouscallbackconditional

解决方案

这是一个很好的问题。鉴于重点是异步编程，它更具挑战性，但无论如何 JS 充满了惊喜和强大的语言！我觉得，你需要结合单例和承诺来解决上述问题。单例来保持动作的状态，比如component1.action1和承诺显然是异步执行的。

调用单例模式的示例如下（如果您了解 angularJS，请将其想象为factoryor service：

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

  function privateMethod () {
    // ...
  }

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

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

  1. async.js：当我们需要协调一系列异步操作时，Async.parallel() 很有用，这些操作可以相互独立地执行，并且我们希望在所有任务都成功完成后采取一些行动。

  2. Bluebird.js是另一个编写良好的异步操作库。按照这里的备忘单 - https://devhints.io/bluebird

推荐阅读