이번에는 좀 더 실무에 가깝게 #await 표현식 안에 직접 비동기 함수인 promiseFunc를 호출하지 않고 버튼 이벤트에 의해서 동작하도록 전체 코드를 조금 수정해보겠습니다. 사용자가 클릭했을 때 조회하는 게 좀 더 현실적일 테니까요.
REPL의 App.svelte
<script>
// async 함수 정의
async function promiseFunc(){
… 생략 …
}
let myPromise = promiseFunc(); // 1. 최초 호출하기
</script>
<!-- 2. 버튼 만들어 호출하기 -->
<button on:click={() => myPromise = promiseFunc() }> async 함수 호출하기 </button>
<main>
<!-- 3. 비동기 함수 결과로 바꾸기 -->
{#await myPromise}
… 생략 …
{/await}
</main>
1번에서 최초 돔에 렌더링될 때 비동기 함수를 호출했습니다.