Как импортировать одноэлементный класс, подобный сервису, с помощью System.js?

Question

У меня есть класс Singleton FooServiceкоторый загружается через import-map. Я хотел бы (а) дождаться этого и использовать его в различных асинхронных функциях, например:

      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())
  .
  .
}

Как я могу добиться этого, не загружая его заново каждый раз, когда я хочу его использовать?

Answer 1

Ваше первое предположение было почти правильным. Обратите внимание, что 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"объект модуля" (или, что еще хуже, class) и вместо этого просто exportименованные функции, так что вы можете удалить .then(module => module.FooService).

Answer 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();
  }
})();