Код IT
← Каталог

Vue и Svelte — готовые компоненты — Загрузка с API — Svelte

Фрагмент из «Vue и Svelte — готовые компоненты»: Загрузка с API — Svelte.

Svelte main.svelte
<script>
  import { onMount } from 'svelte'

  let notes = $state([])
  let error = $state('')
  let loading = $state(true)

  onMount(async () => {
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      notes = await res.json()
    } catch (e) {
      error = e.message
    } finally {
      loading = false
    }
  })
</script>

<section>
  <h2>Записи с сервера</h2>
  {#if loading}
    <p>Загрузка…</p>
  {:else if error}
    <p>Ошибка: {error}</p>
  {:else}
    <ul>
      {#each notes as n (n.id)}
        <li>{n.title}</li>
      {/each}
    </ul>
  {/if}
</section>
<script>
  import { onMount } from 'svelte'

  let notes = $state([])
  let error = $state('')
  let loading = $state(true)

  onMount(async () => {
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      notes = await res.json()
    } catch (e) {
      error = e.message
    } finally {
      loading = false
    }
  })
</script>

<section>
  <h2>Записи с сервера</h2>
  {#if loading}
    <p>Загрузка…</p>
  {:else if error}
    <p>Ошибка: {error}</p>
  {:else}
    <ul>
      {#each notes as n (n.id)}
        <li>{n.title}</li>
      {/each}
    </ul>
  {/if}
</section>