Как запустить два асинхронных режима синхронно?

Question

У меня есть функция:

fn = () => {
   fn1(); // call first
   fn2(); // call only when listener is done from fn1
}

и эти две функции:

fn1 = () => {
   const k1 = new Image();
   k1.src = someSrc;
   k1.addEventListener('load', () => some func {});
}

Мой вопрос: что делать, чтобы функция fn2 срабатывала только тогда, когда fn1вызвано и событие load запущено?

const fn = async () => {
   await fn1(); // call first
   await fn2(); // call only when listener is done from fn1
}

const fn1 = async () => {
   const k1 = new Image();
   k1.src = await 'https://www.medicalnewstoday.com/content/images/articles/326/326253/corgi-and-terrier-running.jpg';
   await k1.addEventListener('load', async () => await console.log('it should log first'));
}

const fn2 = async () => {
   console.log('then second');
}

fn();

Answer 1

Если вы хотите работать с async / await, как упомянуто в комментариях, то вам нужно создать и вернуть обещание:

const fn1 = () => {
  return new Promise((resolve) => {
    const k1 = new Image();
    k1.src = someSrc;
    k1.addEventListener('load', resolve);
  });
}

Затем вы можете ожидать это обещание в асинхронной функции:

const fn = async () => {
  await fn1();
  fn2();
}

Answer 2

Попробуйте что-то вроде этого:

const fn1 = () => {
   const k1 = new Image();
   k1.src = 'https://www.medicalnewstoday.com/content/images/articles/326/326253/corgi-and-terrier-running.jpg';
  document.body.appendChild(k1);
  return new Promise(resolve => {
  	k1.addEventListener('load', () => resolve('I am done!'));
  })
}

const fn2 = () => {
   console.log('then second');
}

const fn = async () => {
   const a = await fn1(); // call first
  	console.log(a);
   fn2(); // call only when listener is done from fn1
}

fn();