Вызовите асинхронную функцию из монтирования HTML

Question

Так что мне пришлось включить функцию async, и теперь я не могу вызвать ее, не получив ошибок. Это работает:

$('#my-obj').html(
'<li>' +
   '<a href="#"></a>'
   + myFunction("parameter") +
   '<i class="fa fa-arrow-left"></i>' +
   ...
)

Превратила мою функцию в асинхронное:

async function myFunction() {
   //Do some stuff
   return myString;
}  

Проблема в том, что она работает, но возвращает мою строку, обернутую promise. Поэтому я попытался сделать то, что я делаю до сих пор:

$('#my-obj').html(
'<li>' +
   '<a href="#"></a>'
   + await myFunction("parameter") +
   '<i class="fa fa-arrow-left"></i>' +
   ...
)  

Не работает. Там написано, что в этой строке есть недопустимые символы.
Как заставить это работать?

Answer 1

Вы можете использовать await только в функции async. С функцией async она работает:

async function myFunction(x) {
  return x.toUpperCase();
}

(async () => {
  $('#my-obj').html(
  '<li>' +
     '<a href="#"></a>'
     + await myFunction("parameter") +
     '<i class="fa fa-arrow-left"></i>' +
     '</li>'
  );
})()
.catch(error => {
  // Handle error
});

<ul id="my-obj"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>