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

Question

[Михаил Ливач]

Я уверен, что где-то видел красивое решение задачи, но не могу найти. Суть в следующем:

• API нужен на странице только при наступлении некоторого условия,
  
• чтобы использовать API, его надо сначала загрузить.
  

Решение (если я не галлюцинирую) выглядело так:

1. Как только API потребовался, мы начинаем его загрузку, а задания на его использование помещаем в аналог очереди (возможно, это был обычный массив);
   
2. когда API готов, он обрабатывает все задания из очереди;
   
3. все новые задания при загруженном API исполняются сразу или практически сразу.
   

Вроде бы похоже на то, как Метрика/Аналитика работают с window.dataLayer ...

Answer 1

[Aetae]

Вот те простой хэлпер для ленивой загрузки одной функции:

function lazyAsync(lib) {
  let promise;
  return async function (...args) {
    promise ??= lib();

    return (await promise).call(this, ...args);
  };
}

const doSomething = lazyAsync(async () => {
  // тут загружаем
  const doSomething = await loadLib('doSomething');

  // тут что-то делаем с загруженным

  // тут возвращаем конечную функцию
  return data => {
    // тут делаем с аргументами
    return doSomething.process(imgData);
  };
});

// если сразу загружается нужная функция - можно не усложнять
const doSomething = lazyAsync(loadDoSomethingProcess);

await doSomething(1);
await doSomething(2);
await doSomething(3);