Как создать и зависеть от асинхронного JavaScript-модуля?

Question

Существует несколько способов создания и импорта модулей в JavaScript, но насколько я знаю, все они предназначены для синхронной загрузки.

Чтобы продемонстрировать эту проблему я столкнулся, я создал эти два примера CommonJS модули:

var Dependency; 
(function (Dependency) { 

    Dependency.data = 'Not loaded!'; 

    function doSomethingAsync() { 
     // Fetching data from server... 
     setTimeout(function() { 
      Dependency.data = 'Loaded!'; 
     }, 2000); 
    } 

})(Dependency = exports.Dependency || (exports.Dependency = {})); 

Этот модуль содержит некоторую асинхронную код, и не могу (/ не должен) быть использован при «загрузке» , При попытке использовать data из другого модуля, он не будет работать:

var dep = require("./dependency"); 
var MyModule; 
(function (MyModule) { 

    function useDependency() { 
     // Logs out 'Not loaded!' 
     console.log(dep.Dependency.data); 
    } 

    MyModule.useDependency = useDependency; 

})(MyModule = exports.MyModule || (exports.MyModule = {})); 

Вызов MyModule.useDependency() покажет, что Dependency не может использоваться еще.

Я ищу способ реализации общей структуры для использования в моих проектах.

---

Решение, которое я придумал, использовало (ES6) обещания. Я дал каждому модулю функцию load(), которая все возвращает обещание. Поэтому в этом случае я бы вызвал Dependency.load().then(MyModule.load) из своего рода файла входа. Это будет нормально работать в этом случае, так как useDependency() распечатает Loaded!. Хотя я не уверен, что это лучшее решение, так как мне нужно будет отслеживать все эти зависимости вручную.

---

Так что мой вопрос: Каков наилучший способ обработки таких асинхронные зависимостей модулей? И есть ли стандартный способ сделать это?

Answer 1

Я ищу способ реализации общей структуры для использования в моих проектах.

Поскольку вы используете модули Common.js, лучший и самый простой способ - сделать каждый экспорт (модуля с использованием асинхронной инициализации) само обещанием.

(Конечно, если это только одна функция в модуле, то только то, что функция должна возвращать обещание)

// dependency.js 
var promise = new Promise(resolve => { 
    // Fetching data from server... 
    setTimeout(function() { 
     resolve('Loaded!') 
    }, 2000); 
}); 
module.exports = promise.then(data => { 
    … 
    return { 
     data, 
     … 
    }; 
}); 

// mymodule.js 
module.exports = Promise.all([ 
    require("./dependency"), 
    … 
]).then(([dep, …]) => { 
    … 
    return { 
     useDependency() { 
      console.log(dep.data); // 'Loaded' 
     }, 
     … 
    }; 
}); 

// main.js 
require('mymodule').then(MyModule => { 
    MyModule.useDependency(); 
}); 

Обратите внимание, что это не работает с циклическими зависимостями.

И этот совет абсолютно недействителен для модулей ES6, которые в настоящее время не имеют глобальной асинхронности.