14-Instalación y Configuración de Axios para Leticias HTTP

 

 Introducción

Axios es una librería JavaScript ampliamente utilizada para realizar peticiones HTTP desde el navegador o Node.js. En este tutorial aprenderemos a instalarla y configurarla adecuadamente para un proyecto.

🚀 Paso 1: Instalación de Axios

  1. Abre tu terminal en la carpeta de tu proyecto

  2. Ejecuta el siguiente comando:

bash
npm install axios

Nota: En el tutorial original menciona "actions" pero se refiere a Axios. La instalación correcta es con npm install axios.

  1. Espera a que complete la instalación. Verás algo similar a:

text
+ axios@1.6.0
added 1 package in 2s

📁 Paso 2: Crear archivo de configuración HTTP

  1. Crea un nuevo archivo llamado http-common.js en la carpeta src/

  2. Copia el siguiente código:

javascript
// Importar Axios
import axios from 'axios';

// Crear y exportar instancia configurada de Axios
export default axios.create({
  baseURL: 'http://localhost:8000/api/', // URL base de tu API
  headers: {
    'Content-Type': 'application/json' // Tipo de contenido por defecto
  }
});

🔍 Explicación de la configuración:

  • baseURL: URL base a la que se enviarán todas las peticiones

  • headers: Encabezados por defecto (en este caso, especificamos que trabajaremos con JSON)

🎬 Paso 3: Crear un servicio para películas

  1. Crea un archivo llamado movieService.js

  2. Importa tu configuración HTTP:

javascript
import http from './http-common';

  1. Agrega los métodos para CRUD:

javascript
class MovieService {
  // Obtener todas las películas
  getAll() {
    return http.get('/movies');
  }

  // Obtener película por ID
  getById(id) {
    return http.get(`/movies/${id}`);
  }

  // Crear nueva película
  create(data) {
    return http.post('/movies', data);
  }

  // Actualizar película existente
  update(id, data) {
    return http.put(`/movies/${id}`, data);
  }

  // Eliminar película
  delete(id) {
    return http.delete(`/movies/${id}`);
  }
}

// Exportar instancia del servicio
export default new MovieService();

💡 Puntos importantes a recordar:

1. Uso de template literals

Cuando necesitas pasar parámetros en la URL, usa backticks (`):

javascript
`/movies/${id}`

Cuando la URL es estática, puedes usar comillas simples:

javascript
'/movies'

2. Métodos HTTP disponibles:

  • http.get() - Obtener datos

  • http.post() - Crear nuevos recursos

  • http.put() - Actualizar recursos existentes

  • http.delete() - Eliminar recursos

3. Estructura de carpetas recomendada:

text
src/
├── services/
│   ├── http-common.js
│   └── movieService.js
└── ...

🧪 Paso 4: Usar el servicio en tu aplicación

Ejemplo de cómo consumir el servicio en un componente:

javascript
import movieService from './services/movieService';

// Obtener todas las películas
async function fetchMovies() {
  try {
    const response = await movieService.getAll();
    console.log(response.data);
  } catch (error) {
    console.error('Error al obtener películas:', error);
  }
}

// Crear una nueva película
async function createMovie(movieData) {
  try {
    const response = await movieService.create(movieData);
    console.log('Película creada:', response.data);
  } catch (error) {
    console.error('Error al crear película:', error);
  }
}

🎯 Buenas prácticas:

  1. Manejo de errores: Siempre usa try-catch al hacer peticiones

  2. Variables de entorno: Considera almacenar la URL base en variables de entorno

  3. Interceptores: Axios permite agregar interceptores para manejar tokens de autenticación globalmente

  4. Timeouts: Configura timeouts para evitar peticiones eternas

🔧 Configuración avanzada (opcional)

Puedes agregar interceptores en http-common.js:

javascript
import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:8000/api/',
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 5000 // Timeout de 5 segundos
});

// Interceptor para agregar token de autenticación
instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Interceptor para respuestas
instance.interceptors.response.use(
  (response) => response,
  (error) => {
    // Manejo global de errores
    console.error('Error HTTP:', error.response?.status);
    return Promise.reject(error);
  }
);

export default instance;

✅ Resumen

Hemos aprendido a:

  1. ✅ Instalar Axios con npm

  2. ✅ Crear configuración base para peticiones HTTP

  3. ✅ Implementar un servicio organizado

  4. ✅ Usar métodos HTTP (GET, POST, PUT, DELETE)

  5. ✅ Exportar e importar correctamente los servicios

Ahora tienes una base sólida para realizar peticiones HTTP en tu aplicación de manera organizada y mantenible

Comentarios

Publicar un comentario

Entradas más populares de este blog

Axios para Principiantes - Guía Paso a Paso

  Axios para Principiantes - Guía Paso a Paso 📚  ¿Qué es Axios? Axios  es como un  "mensajero"  entre tu aplicación web y un servidor. Imagina que tu app necesita pedir información (como una lista de películas) a un servidor en internet - Axios se encarga de enviar esa "carta" y traer la "respuesta". 🎯  ¿Por qué usar Axios? (Para principiantes) Sin Axios: text Tu App → "Oye servidor, dame películas" ❌ (no sabe cómo comunicarse) Con Axios: text Tu App → Axios → "GET /películas" → Servidor → ✓ Películas recibidas ✅ Ventajas: Más fácil que el método nativo de JavaScript (fetch) Mejor manejo de errores Funciona en todos los navegadores Soporte para promesas (async/await) 🚀  PASO 1: INSTALACIÓN (La Parte Fácil) ¿Qué es NPM? NPM es como una  "tienda de aplicaciones"  para programadores. En lugar de ir a una tienda, escribes comandos en la terminal. Pasos concretos: Abre la terminal  (Command Prompt, Terminal, o la terminal de VS ...
Leer más

15-Tutorial: Crear Película en React con useState

  Introducción ¡Excelente! Ya tienes todos los métodos configurados para conectar tu aplicación React con el backend. Ahora vamos a implementar la funcionalidad para crear películas, lo que nos permitirá tener una lista inicial de películas al regresar al home. Paso 1: Importaciones necesarias Vamos al componente  AddMovie.js  y realizamos las importaciones: jsx import React , { useState } from 'react' ; import MovieService from '../services/movieService' ; Paso 2: Estado inicial de la película Dentro del componente funcional, antes del return, definimos el estado inicial: jsx const AddMovie = ( ) => { // Estado inicial de la película const initialMovieState = { title : '' , director : '' , genre : '' , synopsis : '' , year : 0 , rating : 0 } ; // Estado para manejar la película actual const [ movie , setMovie ] = useState ( initialMovieState ) ; // Estado par...
Leer más

Tutorial de React para Principiantes

  Tutorial de React para Principiantes 📚 ¿Qué es React? React es una  biblioteca de JavaScript  para construir interfaces de usuario. Piensa en ella como una herramienta que te ayuda a crear páginas web dinámicas de manera organizada. 🧩 Conceptos Básicos de React 1.  Componentes Los componentes son como  bloques de construcción  de tu aplicación. Cada parte de tu página web puede ser un componente: javascript // Un componente básico function Saludo ( ) { return < h1 > ¡Hola Mundo ! < / h1 > ; } 2.  JSX Es una extensión de JavaScript que parece HTML pero se escribe dentro de JavaScript: javascript // Esto es JSX const elemento = < h1 > Hola , mundo ! < / h1 > ; 3.  Props (Propiedades) Son como  parámetros  que le pasas a un componente: javascript function Saludo ( props ) { return < h1 > Hola , { props . nombre } ! < / h1 > ; } // Uso: <Saludo nombre="Juan" /> 4.  Esta...
Leer más