Как импортировать одноэлементный класс, подобный сервису, с помощью System.js?
У меня есть Singleton-Class FooService, который загружается через карту импорта. Я хотел бы (а) дождаться этого и использовать его в различных асинхронных функциях, например:
declare global {
interface Window {
System: System.Module
}
}
const module = window.System.import('@internal/foo-service')
const fooService = module.FooService
async function func1() {
await fooService.doBar()
.
.
}
async function func2() {
await fooService.doBar2()
.
.
}
Но я мог заставить его работать только так:
declare global {
interface Window {
System: System.Module
}
}
async function getfooService() {
const module = await window.System.import('@internal/foo-service')
return module.FooService
}
function func1() {
getfooService().then(fooService => fooService .doBar())
.
.
}
function func2() {
getfooService().then(fooService => fooService.doBar2())
.
.
}
Как я могу добиться этого, не загружая его заново каждый раз, когда я хочу его использовать?
Почему бы вам просто не написать import { FooService } from '@internal/foo-service';?
Модуль уже образует синглтон. Не нужно использовать «одиночку class».
@Bergi Он загружается через System.js, потому что он загружается асинхронно. Обычно его импорт приводит к ошибке.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
вы можете попробовать обернуть его в IIFE, например:
declare global {
interface Window {
System: System.Module
}
}
// Wrap rest of the code in IIFE
(async () => {
const module = await window.System.import("@internal/foo-service");
// Use await keyword if FooService/doBar/doBar2 are async
const fooService = await module.FooService;
const doBar = await fooService;
const doBar2 = await fooService;
async function func1() {
doBar();
}
async function func2() {
doBar2();
}
})();
Поскольку это модуль Vuex, я не думаю, что это возможно:/
Ваше первое предположение было почти правильным. Обратите внимание, что module, возвращаемый import, является обещанием, поэтому вам нужно использовать его как
const fooService = window.System.import('@internal/foo-service').then(module =>
module.FooService
);
async function func1() {
(await fooService).doBar();
//^ ^
…
}
async function func2() {
(await fooService).doBar2();
//^ ^
…
}
Кстати, я бы порекомендовал избегать использования «объекта модуля» FooService (или, что еще хуже, класса), а вместо этого просто export именованные функции, чтобы вы могли удалить .then(module => module.FooService).
Работает отлично, но теперь Jest спотыкается с Cannot read property 'import' of undefined, чего раньше не было
@leonheess Я не думаю, что в Jest есть window.System. Вы, вероятно, должны задать новый вопрос об этом, хотя
Я создал один здесь
Модули не загружаются заново, независимо от того, как часто вы их импортируете.