Svelte - Await Block

📌 목록

• Introduction
• Await Block
• Short version
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 svelte의 await block에 대해서 알아보겠습니다. apollo의 기능과 유사하긴 해요. 그럼 한번 알아볼까요?

📌 Await Block

기본적인 문법은 이렇습니다.

{#await promise}

{:then vale}

{:catch error}

{/await}

처음에 apollo에서 이러한 문법을 봤을땐 정말 신기하긴 했는데 이제 더이상 loading처리를 각각 해주지 않아도 좋은거 같아요. 그럼 한번 jsonplaceholder에서 값을 받아와 볼까요?

<script>
  import axios from 'axios';

  let users;

  const getUsers = async () => {
    try {
      const res = await axios.get('https://jsonplaceholder.typicode.com/users');
      users = res.data;
      return res;
    } catch(error) {
      throw new Error(error);
    }
  }
  let promise = getUsers();
</script>

{#await promise}
  <!-- ⭐️ 이렇게 기다려 줄수 있습니다... -->
  <h1>...LOADING</h1>
{:then}
  <!-- 받아온 자료를 한번 each를 사용해볼게요. -->
  <ul>
    {#each users as {name, username}}
    <li>
      <span>name: {name}</span>
      <span>username: {username}</span>
    </li>
    {/each}
  </ul>
{:catch error}
  <h1>ERROR: {error.message}</h1>
{/await}

📌 Short version

바로 then을 사용해서 뽑아줄 수도 있습니다.

{#await promise then value}
  <div>{value}</div>
{/await}

📌 Conclusion

오늘은 이렇게 해서 await block에 대해서 알아봤습니다. apollo를 사용하면서 생각보다 많이 이기능을 사용하게 되는거 같아요. 이게 그냥 붙어있어서 참 좋은거 같습니다. 더더욱 svetle의 매력에 빠지는거 같아요. 간결하면서도 필요한건 다있는... 내일 회사를 가면 vue를 사용해야하는데 답답한 마음이 커질거 같아요.... 😭 그럼 다음 포스팅에서 만나요~ 안녕!

📌 Reference

• svelte tutorial