🚀 ¡Transforma tu idea en un proyecto exitoso!
Desarrollo moderno, creativo, eficiente y escalable.
Comunicación clara, entregas puntuales y soluciones que realmente funcionan.
¡Conversemos!

Cómo Consumir APIs con Svelte

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.

  ¿Cuál es la importancia saber consumir APIs en Svelte?

  1. Arquitectura moderna: La mayoría de las aplicaciones web modernas se basan en arquitecturas cliente-servidor donde el frontend consume APIs.
  2. Datos dinámicos: Permite mantener la información actualizada sin recargar la página.
  3. Escalabilidad: Facilita la separación de responsabilidades entre frontend y backend.
  4. Rendimiento: Svelte ofrece patrones optimizados para manejar datos asíncronos.
  5. Experiencia de usuario: Permite crear interfaces reactivas que responden a cambios en tiempo real.

Ejemplos Prácticos

1. Enfoque Básico con #await

Este enfoque es ideal para casos simples donde solo necesitamos cargar y mostrar datos una vez.

js 
<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>
  Ventajas

  • Código conciso y legible
  • Manejo integrado de estados de carga
  • Perfecto para componentes simples
  • Sintaxis declarativa

2. Enfoque con Estado y Control de Errores

Este patrón es más robusto y ofrece mayor control sobre el proceso de carga y manejo de errores.

js 
<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>
  Ventajas

  • Control granular sobre el estado
  • Manejo explícito de errores
  • Posibilidad de recargar datos
  • Ideal para interacciones complejas

3. Enfoque Avanzado con Múltiples Endpoints

Este patrón es útil cuando necesitamos manejar múltiples endpoints y estados relacionados.

js 
<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>
  Ventajas

  • Manejo de múltiples endpoints
  • Estado compartido entre componentes
  • Carga inicial automática con onMount
  • Interfaz interactiva

  Conclusión

La elección del patrón correcto dependerá de tus necesidades específicas:

  • Para casos simples, el enfoque con #await es perfecto
  • Para más control y manejo de errores, usa el enfoque con estado ($state)
  • Para aplicaciones complejas, considera el enfoque avanzado con múltiples endpoints.