이제 데이터를 가져오는 버튼을 만듭니다. 버튼을 클릭하면 getPost 함수를 호출합니다. 그리고 결과를 promisePosts에 넣어주는 코드를 on:click 함수 안에 작성합니다.
데이터를 가져오는 버튼 만들기
<script>
… 생략 …
</script>
<main>
<!-- 버튼 클릭 시 getPosts 함수를 호출하여 원격지 데이터 가져오기 -->
<button on:click={() => promisePosts = getPosts()}> 포스트 리스트 가져오기 </button>
</main>
그리고 {#await} 블록을 작성합니다. {#await} 블록은 table>tbody 안에 작성하겠습니다.
REPL의 App.svelte
<script>
… 생략 …
</script>
<main>
<!-- 버튼 클릭 시 getPosts 함수를 호출하여 원격지 데이터 가져오기 -->
<button on:click={() => promisePosts = getPosts()}> 포스트 리스트 가져오기 </button>
<table border="1">
<thead>
<th>id</th>
<th>사용자</th>
<th>타이틀</th>
<th>내용</th>
</thead>
<tbody>
{#await promisePosts} <!-- 동작 중일 때 처리 -->
<tr>
<td colspan=4>
가져오는 중 잠시만 기다리세요
</td>
</tr>
{:then posts} <!-- 정상 종료 후 처리 -->
{#each posts as post} <!-- fetch 결과의 데이터 개수만큼 반복 실행 -->
<tr> <!-- tr, td 엘리먼트로 출력 -->
<td>{post.id}</td>
<td>{post.userId}</td>
<td>{post.title}</td>
<td>{post.body}</td>
</tr>
{/each}
{/await}
</tbody>
</table>
</main>