如何使用System.js导入类似服务的单例-class？

Question

我有一个通过 import-map 加载的 Singleton-Class FooService。我想 (a) 等待它并在各种异步函数中使用它，如下所示：

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

您可以尝试将其包装在 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();
  }
})();

Answer 2

你的第一个猜测几乎没问题。请注意 import 返回的 module 是一个承诺，因此您需要将其用作

const fooService = window.System.import('@internal/foo-service').then(module =>
  module.FooService
);

async function func1() {
  (await fooService).doBar();
//^                ^
  …
}

async function func2() {
  (await fooService).doBar2();
//^                ^
  …
}

顺便说一句，我建议而不是 export 命名函数，这样你就可以删除 .then(module => module.FooService).

如何使用System.js导入类似服务的单例-class？

How to import a service-like singleton-class with System.js?

javascript

typescript

system.js

import-maps