우선 온라인 데이터를 가져오는 코드를 작성해보죠. svelte.dev 웹 사이트에서 REPL을 열고 App.svelte에 다음과 같이 작성합니다.
REPL의 App.svelte, fetch 코드 스크립트 블록
<script>
// async 함수 정의
async function getPosts(){
// 원격지 데이터를 fetch로 가져오기
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const json = await res.json(); // fetch 결과를 JSON 객체로 변환
return json; // JSON 객체 반환
}
let promisePosts = getPosts(); // 최초 호출
</script>
<main>
</main>
getPosts라는 async 함수를 만들었지만 서버는 만들지 않았습니다. 대신, 서버 코드는 직접 작성하지 않고 fake server를 사용했어요. 서버로부터 받은 결과를 res.json(); 코드를 사용해 JSON 형태로 변환했습니다.
App.svelte 컴포넌트가 로딩될 때 getPosts() 함수를 호출해서 promisePosts 값에 할당했습니다. 이제 할당된 promisePosts를 #await 블록 안에서 사용하겠습니다.