El consumo de APIs es una habilidad fundamental en el desarrollo web moderno. Con Svelte, tenemos varias formas eficientes de manejar las peticiones a APIs, cada una con sus propias ventajas y casos de uso específicos.
#awaitEste enfoque es ideal para casos simples donde solo necesitamos cargar y mostrar datos una vez.
<script>
# fetching de datos
const personas = (async () => {
const URL = "https://reqres.in/api/users?page=1"; # url de la api
const response = await fetch(URL); # peticion
return await response.json(); # json de la respuesta
})();
</script>
<main>
<h1>
Consumir API REST en Svelte
</h1>
<ul class="user-list">
{#await personas}
<div class="loader-container">
<div class="loader">Cargando...</div>
</div>
{:then data}
{#each data.data as persona (persona.id)}
<li class="user-item">
<img src={persona.avatar} alt={persona.first_name} class="user-avatar" />
<div class="user-details">
<p>Nombre: {persona.first_name}</p>
<p>Email: {persona.email}</p>
</div>
</li>
{/each}
{/await}
</ul>
</main>Este patrón es más robusto y ofrece mayor control sobre el proceso de carga y manejo de errores.
<script>
# Importando el estado state de svelte
import { state } from 'svelte';
let posts = $state([]); # estado para almacenar los posts
let loading = $state(false); # estado para controlar la carga
let error = $state(null); # estado para controlar los errores
# Funcion para cargar los posts
async function fetchPosts() {
loading = true;
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok) throw new Error('Error al cargar los posts');
posts = await response.json();
} catch (e) {
error = e.message;
} finally {
loading = false;
}
}
</script>
<template>
<!-- Botón para cargar los posts -->
<button on:click={fetchPosts}>Cargar Posts</button>
<!-- Estado para controlar la carga -->
{#if loading}
<p>Cargando...</p>
{/if}
{#if error}
<p class="error">{error}</p>
{/if}
<!-- Listado de posts -->
<ul>
{#each posts as post}
<li>
<h3>{post.title}</h3>
<p>{post.body}</p>
</li>
{/each}
</ul>
</template>Este patrón es útil cuando necesitamos manejar múltiples endpoints y estados relacionados.
<script>
import { onMount } from 'svelte';
let users = $state([]);
let currentUser = $state(null);
async function getUsers() {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
return await response.json();
}
async function getUser(id) {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
return await response.json();
}
onMount(async () => {
users = await getUsers();
});
async function selectUser(id) {
currentUser = await getUser(id);
}
</script>
<template>
<div class="users-container">
<h2>Lista de Usuarios</h2>
<div class="users-list">
{#each users as user}
<button
on:click={() => selectUser(user.id)}
class:active={currentUser?.id === user.id}
>
{user.name}
</button>
{/each}
</div>
{#if currentUser}
<div class="user-details">
<h3>{currentUser.name}</h3>
<p>Email: {currentUser.email}</p>
<p>Teléfono: {currentUser.phone}</p>
<p>Website: {currentUser.website}</p>
</div>
{/if}
</div>
</template>La elección del patrón correcto dependerá de tus necesidades específicas:
#await es perfecto$state)