[Svelte]await 블록 및 Promise 처리

Svelte에서 Promise 처리

이번 포스팅은 Svelte에서 제공하는 await 블록을 사용하여 Promise를 처리하는 방법을 소개합니다.

 

JSON 구조의 데이터를 Response 하는 jsonplaceholder 사이트를 이용하여 스벨트 애플리케이션에서 API 요청할 것이며 다음 사진처럼 버튼을 클릭하면 Response 받은 JSON 데이터를 웹 페이지에 출력합니다.

---

순서 1. 버튼 생성 및 API 요청

먼저, HTML 영역에 버튼을 생성합니다. 그리고 버튼을 클릭하면 jsonplaceholder API에 데이터를 요청(request) 하기 위해 script 영역에 fetch() 함수를 사용합니다.

 

script 영역에 toDoList라는 변수는 response 받은 데이터를 할당받는 배열입니다.

<script>
  let toDoList = [];
  async function getTodos() {
    const url =
    'https://jsonplaceholder.typicode.com/todos/';

    const res = await fetch(url); // url로 비동기 요청에 대한 응답을 Promise 객체로 받습니다.
    let resData = res.json();     // 응답받은 데이터를 json으로 변환
    
    if (res.ok) { // 정상적으로 응답받은 경우
      console.log(resData);
      return resData;
    } else {
      throw new Error("error");
    }
  }
</script>

<div>
  <button on:click={() => toDoList = getTodos()}>
    toDoList 가져오기
  </button>
</div>

[실행 결과]

위 소스 코드를 적용하면 웹 브라우저 도구의 콘솔 창에서 버튼을 클릭할 때마다 응답받은 데이터를 확인할 수 있습니다. 이제 응답받은 데이터를 HTML 영역에 표시합니다.

---

순서 2. HTML 영역에 출력

Svlete는 {#await} 구문을 사용하여 html 영역에서 Promise 객체의 상태에 따라 웹 브라우저에 표시하고 싶은 템플릿을 제어할 수 있습니다. 

 

{#await} 구문에 Promise 객체를 정의하고 Promise 처리가 성공적이면 {:then} 구문이 실행되고 그렇지 않으면 {:catch} 구문이 실행됩니다.

 

다음은 {#await} 구문 작성 방법입니다.

{#await toDoList}
  <p>loading</p>
{:then items}
  {#each items as item}
    <li>{item.id}. {item.title}</li>
  {/each}
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

- toDoList는 script영역에 선언된 Promise 객체를 반환받는 변수입니다. 비동기 통신이 발생했고 아직 응답을 받지 못한 상태라면 웹 브라우저에 loading이라는 문자열이 표시됩니다.

- Promise 객체의 상태가 이행(fulfiled)인 경우 {:then} 구문 뒤에 있는 코드가 실행됩니다.

- Promise 객체의 상태가 거부(rejected)인 경우 {:catch} 구문 뒤에 있는 코드가 실행됩니다.

 

다음 소스 코드는 {#await} 구문을 사용하여 jsonplaceholder API로부터 응답받은 데이터를 웹 브라우저에 표시합니다.

<script>
  let toDoList = [];
  async function getTodos() {
    const url =
    'https://jsonplaceholder.typicode.com/todos/';

    const res = await fetch(url); // url로 비동기 요청에 대한 응답을 Promise 객체로 받습니다.
    let resData = res.json();     // 응답받은 데이터를 json으로 변환
    
    if (res.ok) { // 정상적으로 응답받은 경우
      console.log(resData);
      return resData;
    } else {
      throw new Error("error");
    }
  }
</script>

<div>
  <button on:click={() => toDoList = getTodos()}>
    toDoList 가져오기
  </button>
  {#await toDoList}
    <p>loading</p>
  {:then items}
    {#each items as item}
      <li>{item.id}. {item.title}</li>
    {/each}
  {:catch error}
    <p style="color: red">{error.message}</p>
  {/await}
</div>

위 예제처럼 Svelete의 {#await} 구문을 사용하여 비동기 함수 실행, 완료, 에러에 대해 웹 브라우저에 표시하고 싶은 컴포넌트를 제어할 수 있습니다.

 

예를 들어, 비동기 함수가 완료되기를 기다리는 동안에는 로딩 메시지 또는 로딩바를 화면에 표시할 수 있고 에러가 발생하는 경우 사용자에게 에러가 발생했다는 메시지를 화면에 표시할 수 있습니다.