วิธีการดึงข้อมูล API (Data Fetching) ด้วย Svelte

1
<script>
2
  import {onMount} from 'svelte' onMount(() =>{' '}
3
  {
4
    // call data
5
  }
6
  )
7
</script>

1
async function getPosts() {
2
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
3
  const users = await res.json()
4

5
  if (res.ok) {
6
    return users
7
  } else {
8
    throw new Error('Something went wrong!')
9
  }
10
}

1
<script>
2
  import { onMount } from 'svelte'
3

4
  let posts
5

6
  onMount(async () => {
7
    posts = await getPosts()
8
  })
9
</script>

1
{#if posts}
2
  {#each posts as post}
3
    <article>
4
      <h1>{post.title}</h1>
5
      <p>{post.body}</p>
6
    </article>
7
  {/each}
8
{/if}

1
<script>
2
  import { onMount } from 'svelte'
3

4
  let posts
5

6
  onMount(async () => {
7
    // 2️⃣ : getPosts จะถูกเรียก ตอน onMount มาเก็บไว้ที่ตัวแปร posts
8
    posts = await getPosts()
9
  })
10

11
  // 1️⃣ : สร้าง function `getPosts` สำหรับดึงข้อมูล (return เป็น Promise)
12
  async function getPosts() {
13
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
14
    const users = await res.json()
15

16
    if (res.ok) {
17
      return users
18
    } else {
19
      throw new Error('Something went wrong!')
20
    }
21
  }
22

23
  // 3️⃣ : เราสามารถ fetch data ได้อีกวิธีด้วยการ กด button
24
  // เพื่อให้ button on:click มาเรียก function นี้
25
  async function handleClick() {
26
    posts = await getPosts();
27
  }
28
</script>
29

30
<button on:click={handleClick}> Fetch Posts </button>
31

32
<!-- 4️⃣ : render posts  -->
33
{#if posts}
34
  {#each posts as post}
35
    <article>
36
      <h1>{post.title}</h1>
37
      <p>{post.body}</p>
38
    </article>
39
  {/each}
40
{/if}

1
{#await expression}...{:then name}...{/await}

1
{#await promise}
2

3
<!-- promise is pending -->
4
<p>waiting for the promise to resolve...</p>
5
{:then value}
6
<!-- promise was fulfilled -->
7
<p>The value is {value}</p>
8
{:catch error}
9
<!-- promise was rejected -->
10
<p>Something went wrong: {error.message}</p>
11
{/await}

1
<script>
2
  // 2️⃣ : Promise ถูกเก็บไว้ที่ตัวแปร `promise`
3
  let promise = getPosts();
4

5
  // 1️⃣ : สร้าง function `getPosts` สำหรับดึงข้อมูล (return เป็น Promise)
6
  async function getPosts() {
7
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
8
    const users = await res.json()
9

10
    if (res.ok) {
11
      return users
12
    } else {
13
      throw new Error('Something went wrong!')
14
    }
15
  }
16

17
  // 3️⃣ : เราสามารถ fetch data ได้อีกวิธีด้วยการ กด button
18
  // เพื่อให้ button on:click มาเรียก function นี้
19
  function handleClick() {
20
    promise = getPosts();
21
  }
22
</script>
23

24
<button on:click={handleClick}> Fetch Posts </button>
25

26
<!-- 4️⃣ : ส่วนของ await blocks  -->
27
{#await promise}
28
  <p>fetching...</p>
29
{:then posts}
30
  {#each posts as post}
31
    <article>
32
      <h1>{post.title}</h1>
33
      <p>{post.body}</p>
34
    </article>
35
  {/each}
36
{:catch error}
37
  <p style="color: red">{error.message}</p>
38
{/await}