버튼이 클릭될 때마다 getPosts 함수가 호출되어 promisePosts에 반영됩니다. 그리고 {#await}는 그 변수의 상태 변화에 맞추어 블록의 HTML을 화면에 보여줍니다.

데이터를 가져오기 전에는 #await의 처음 블록의 tr 안의 내용을 보여주고, 데이터를 가져오고 난 뒤에는 {:then} 구문에서 가져온 데이터를 표현했습니다. 데이터 표현은 {#each} 블록을 사용해 배열의 요소 개수만큼 tr을 출력했습니다. 물론 td는 각각 userId, id, title, body의 값들을 사용해 생성했습니다.

이제 최초에 HTML 테이블이 생성되고, 버튼을 누를 때마다 table이 업데이트됩니다. 이때 {#await}를 사용해 데이터를 가져오는 단계마다 처리해주었습니다. 포스트 리스트 가져오기 버튼을 클릭할 때마다 처리하는 과정을 볼 수 있습니다.

“가져오는 중 잠시만 기다리세요” 메시지가 보인 뒤 데이터가 있는 테이블이 보입니다.

▲ 그림 4-14 await 처리 과정 보기