Javascript—依赖于多个异步prcoces的多个独立操作的最佳实践

Javascript—依赖于多个异步prcoces的多个独立操作的最佳实践,javascript,asynchronous,callback,conditional,Javascript,Asynchronous,Callback,Conditional,基本上,我在页面上有多个组件,它们拥有范围和多个获取数据的服务 最佳实践是什么?例如,如果在某个用户操作上启动的一个延迟组件需要来自其他组件状态的一些条件,以及需要解决的一些多个未来回迁 有关伪语言的简单示例: component on click => if( data1.fetched && data2.fetched && component1.action1 && component2.acti

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

最佳实践是什么?例如,如果在某个用户操作上启动的一个延迟组件需要来自其他组件状态的一些条件,以及需要解决的一些多个未来回迁

有关伪语言的简单示例:

   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
基本上我不能做事件监听器,因为有些组件在发射很久之后就初始化了,但我不知道承诺是什么,它们如何处理过去已经解决的事情,比如完成抓取和状态更改

在实际使用的示例中,假设我们有一个组件GoogleMap,在它的一个依赖项GoogleMaps库为另一个组件初始化之后很久,它就插入到用户操作中,但这个组件需要另一个依赖项,例如,GooglePlacesAPI获取组件还需要等待组件地址字段中的状态参数发出某些操作(但由于其他原因,组件需要在该操作之前初始化)


基本上,问题是等待多个异步条件继续在javascript上执行某些操作的最佳实践是什么,是否有专门用于此的库(没有jQuery,只有用于此的库,如axios)

您基本上描述了承诺的完美用例。是的,承诺仍然可以无限期地使用,即使在它们已经解决/拒绝之后,只要您仍然有对它们的引用。例如:

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
几乎立即解析,5秒后当
setTimeout
触发时,
仍然能够使用已解析承诺的返回值


当然,如果承诺还没有解决(比如说,如果我们在pr1中有一个花了10秒的进程),
。那么
会等到承诺解决后再运行。

这是一个好问题。考虑到重点是异步编程,它更具挑战性,但JS只是充满了惊喜和强大的语言!我觉得,你需要结合单身和承诺来解决上述问题。Singleton保持动作的状态,比如
component1.action1
,并保证异步执行

调用单例模式的示例如下(如果您知道angularJS,请将其想象为
工厂
服务

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

  function privateMethod () {
    // ...
  }

  return { // public interface
    publicMethod1: function () {
      // all private members are accesible here
    },
    publicMethod2: function () {
    }
  };
})();
就异步库而言,没有单一的“正确方法”。我列出了我最喜欢的FYR:

  • :Async.parallel()在我们需要协调一系列异步操作时非常有用,这些操作可以彼此独立执行,并且在所有任务成功完成后我们希望对其采取一些行动

  • 是另一个编写良好的异步操作库-


  • 作为事后思考,您通常可以多次使用承诺,这一点也值得一提(不是链接,而是有多个
    。然后,
    都取决于同一个承诺,它们通常都可以访问返回值。但是,在一些边缘情况下,承诺的返回值的一部分可能只可用一次,例如
    获取
    。一旦您完成
    响应文本()
    ,您不能执行
    resp.json()
    (但在这种情况下,您可以执行
    resp.clone().text()
    ,然后仍然可以执行
    resp.json()