- [¿Cómo funciona la WEB?]
- [HTTP: HyperText Transfer Protocol]
- [fetch():]
- [AXIOS:]
¿Cómo funciona la WEB?
Se entiende que se tiene un cliente web lo cual es todo lo que se ve dentro de un navegador, siendo organizado para poder ser mostrado a ls usuarios, y se tiene un servidor web es donde se almacena toda esa información que se ven en un navegador.
Los usuarios solo tienen interacción con el cliente web, y los desarrolladores tienen más interacción con el servidor web y el control del cliente web mediante el servidor web, para así mostrar dicha información de servidor web a los usuarios de una manea optima.
HTTP: HyperText Transfer Protocol
Para que se puede tener una buena comunicación y que sea segura, se inventaron los protocolos. Los protocolos serán toda la comunicación entre el servidor web y los clientes web.
Se tienen distintos tipos de protocolos y en distintos niveles. Siendo los de aplicaciones web:
- FTP:
- SMTP:
-
HTTP: Protocolo de Transferencia de HyperTexto:
- Transferencia / intercambio de datos en la web a través de documentos
- Protocolo de estructura cliente - servidor
- Cliente: Request / Petición
- Servidor: Response / Respuesta
REQUEST / Petición:
- Método de la petición/request: ***GET***
- La ruta: *******/post*******
- Tipo/número de protocolo que se esté utilizando: HTTP/2
- Cabeceras/headers: Aportan información adicional a parte de la petición:
- Que host/anfitrión provee los servicios.
- Que User-Agent/Navegador se está utilizando.
- Que tipos de archivos se van aceptar.
- Etc…
- Las peticiones también pueden contener un cuerpo/body y mandar información a través de ellos, dependiendo de método que se utilice:
- GET: No se debe manar información a través del body, sino a través del ***************path/ruta***************.
- Cuando se quieren crear nuevos recursos o actualizar algunos ya existentes y se necesita enviar información exactamente a través de los atributos de este nuevo recurso o de la actualización, se debe hacer a través del cuerpo/body.
RESPONSE / Respuesta:
- Tipo/número de protocolo que se esté utilizando: HTTP/2
- Status Code/Código de estado, cada uno con un significado: ***200***
- Status Message/Mensaje de estado: *OK*
- Cabeceras/headers: Aportan información adicional a parte de la petición y algunas serán devueltas dependiente del tipo de petición:
- Fecha de la respuesta.
- Tipo de contenido.
- Servidor.
- Etc…
- Body/Cuerpo: Contiene toda la información necesaria de la petición web.
fetch():
- Método para iniciar el proceso de hacer una búsqueda o petición de un recurso en la Web.
- Cada ves que se está entrando a una página web, se está haciendo una búsqueda de un recurso:
- Un recurso son las rutas que se pueden tener en una página, los cuales son accedidos mediante dicha ruta.
- Cada ves que se está entrando a una página web, se está haciendo una búsqueda de un recurso:
- Retorna una promesa (objeto “response” que produce un valor en el futuro).
SINTAXIS:
- Se llama a ejecutar la función fetch(resource), la cual recibe como argumento el nombre del recurso a obtener siendo éste obtenido mediante toda la URL/path.
- fetch(resource, options), también se pueden colocar como segundo argumento, *************opciones************* adicionales, ya que por defecto fetch va a ejecutar un método *********GET*********, y para utilizar un método distinto, éste debe ser declarado como segundo argumento y también se pueden recibir las siguientes opciones:
OPTIONS:
- Method, headers, body, mode, credentials.
GET: Get all posts / obtiene todos los recursos:
import { useState, useEffect } from "react"; //Se importan las funciones hooks, para manejar los efectos secundarios de un componente, y para manejar el estado de un componente, desde, la biblioteca de react
**const BASE_URL = "https://jsonplaceholder.typicode.com";** //Declaración de constante que será la URL base para hacer peticiones web, con valor asignado de una cadena de texto que es la URL a consultar
export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguinte bloque
const [state, setState] = useState("loading"); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de cadenas de texto "loading", indicando que el componente está en la fase de carga inicial
const [posts, setPosts] = useState([]); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de un arrego vacío
useEffect(() => { //Se llama a ejecutar la función hook para manejar efectos secundarios en componentes, la cual recibe como primer argumento, una función flecha callback, la cual ejecuta el siguiente bloque
async function loadPosts() { //Declaración de función asíncrona, la cual hará la función de obtener los recursos desde una petición web a un servidor, y que ejecuta el siguiente bloque
try { //Se intenta ejecutar el siguiente bloque
**const response = await fetch(BASE_URL + "/posts");** //Declaración de constante, con valor asignado de, "esperar" la respuesta, de ejcutar la función asíncrona de "peticiones web", la cual recibe como argumento, el valor de dicha constante que es la URL del sitio web, concateado con la cadena de texto "/posts" para acceder a los recursos desde dicha URL(ruta web)
if (**response.status === 200**) { //Condicional que valida si, de la respuesta de dicha petición web asíncrona, su propiedad de "estado", es estrictamente igual que el valor numérico 200, para determinar si la petición se realizó correctamente, ejecutando el siguiente bloque si se cumple dicha condición
**const postsResponse = await response.json();** //Declaración de constante con valor asignado de, esperar la respuesta de, a la respuesta de la petición web la cual es un objeto, aplicar el método "json()" para acceder a su información
setPosts(**postsResponse**); //Se llama a ejecutar la función de actualización de uno de los estados del componente, la cual recibe como argumento, la respuesta de la petición web con su contenido accesible el cual es un arreglo que contiene más objetos, siendo este el nuevo valor actual del estado
setState("success"); //Se llama a ejecutar la función de actualización de uno de los estados del componente, la cual recibe como argumento, dicha cadena de texto, siendo este el nuevo valor actual del estado
} else { //Si no se cumple la condición anterior, se ejecuta el siguiente bloque
console.error("error:", **response.status**); //A la consola del navegador, se le aplica el método de mostrar errores en la misma, el cual recibe como argumento, la cadena de texto "error", y de la respuesta de dicha petición web asíncrona, su propiedad de "estado"
setState("error"); //Se llama a ejecutar la función de actualización de uno de los estados del componente, la cual recibe como argumento, dicha cadena de texto, siendo este el nuevo valor actual del estado
}
} catch(error) { //Si no se pudo ejecutar el el bloque anterior de "try", se captura el error para manejarlo, siendo que se recibe como argumento el error, y ejecutando el siguiente bloque
console.error(error); //A la consola del navegador, se le aplica el método de mostrar errores en la misma, el cual recibe como argumento, la cadena de texto "error"
setState("error"); //Se llama a ejecutar la función de actualización de uno de los estados del componente, la cual recibe como argumento, dicha cadena de texto, siendo este el nuevo valor actual del estado
}
}
setTimeout(() => { //Se ejecuta la función que establece un tiempo de espera para ejecutar una funcionalidad, la cual recibe como primer argumento una función de flecha callback, la cual ejecuta el siguiente bloque
loadPosts(); //Se llama a ejecutar dicha función asíncrona para obtener los recursos desde una petición web a un servidor, y así cargar los datos de los posts cuando el componente se monta por primera vez
}, 2000); //Como segundo argumento, se recibe el tiempo en milisegudos para ejecutar dicha función asíncrona
}, []); //Como segundo argumento, recibe un arreglo vacío, así ejecutando el efecto secundario la primera y última vez que se renderice el componente, esto garantiza que el efecto solo se ejecute una vez al inicio
if (state === "loading") return (<div>Loading...</div>); //Antes de renderizar la sección principal del componente, se verifica el valor actual del estado "state" mediante un condicional que valida si, el valor actual de uno de los estados del componente, es estrictamente igual que, la cadena de texto "loading", retornando una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis, una etiqueta contenedora de bloque, la cual contiene el texto "Loading..."
if (state === "error") return (<div>Error</div>); //Antes de renderizar la sección principal del componente, se verifica el valor actual del estado "state" mediante un condicional que valida si, el valor actual de uno de los estados del componente, es estrictamente igual que, la cadena de texto "error", retornando una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis, una etiqueta contenedora de bloque, la cual contiene el texto "Error"
return ( //Se retorna una estructura de JSX, el cual será la sección principal del componente a ser renderizado, siendo colocado entre paréntesis
<div> //Etiqueta contenedora de bloque
<h1>Posts</h1> //Etiqueta de título principal, la cual contiene texto
<section> //Etiqueta de sección dentro de la página
**{posts.map((post) => (** //Dentro de llaves por ser código de JS, al valor actual(**posts, el cual es un arreglo**) de uno de los estados del componente, se le aplica el método de crear un nuevo arreglo iterando cada uno de los obejtos dentro de dicho arrelgo, ejecutando una función de flecha callback por cada uno de los elementos/objetos contenidos dentro del arreglo, la cual recibe como argumento cada uno de los elementos/objetos dentro del arreglo, ejecutando el siguiente bloque
**<article key={post.id}>** //Etiqueta de contenido independiente y autocontenido dentro de la página, la cual posee el atributo "key" para dar una identificación única a cada elemento en la lista, con valor asignado dentro de llaves por ser código de JS, del objeto dentro del arreglo "**posts**", acceder a su propiedad "id" siendo asignado su valor
**{post.id} - {post.title}** //Dentro de llaves por ser código de JS, del elemento/objeto dentro del arreglo, se accede a su propiedad "id", se coloca un guión de texto, y dentro de llaves por ser código de JS, del elemento/objeto dentro del arreglo, se accede a su propiedad "title"
**</article>
))}**
</section>
</div>
);
}
POST: Create a new post / crea una nueva publicación:
import { useState } from "react"; //Se importa la función hook, para manejar el estado de un componente, desde, la biblioteca de react
**const BASE_URL = "https://jsonplaceholder.typicode.com";** //Declaración de constante con valor asignado de, una cadena de texto, la cual es la URL base, a la cual se le harán peticiones web
export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguiente bloque
const [isLoading, setIsLoading] = useState(false); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor booleano "false", indicando un estado de "cargando" al hacer la petición web, en false porque no se está cargando nada por defecto
const [title, setTitle] = useState(""); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de cadenas de texto vacío, indicando que será el título al crear un nuevo post/publicación para ser enviada como petición al servidor web/URL, a través de un formulario
const [body, setBody] = useState(""); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de cadenas de texto vacío, indicando que será el cuerpo al crear un nuevo post/publicación para ser enviada como petición al servidor web/URL, a través de un formulario
const [createdPosts, setCreatedPosts] = useState([]); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, un arreglo vacío que contendrá los posts/publicacines creadas y enviadas como petición al servidor web/URL
**async function createPost(event) {** //Declaración de función asíncrona, la cual hará la funcíon de hacer una petición web para crear un nuevo post/publicación para ser enviada como petición al servidor web/URL que se ejecutará cuando se envíe el formulario del componente, la cual recibe como argumento, el evento ejectado del formulario, y que ejecuta el siguiente bloque
event.preventDefault(); //A dicho evento ejecutado, se le aplica el método para prevenir su comportamiento por defecto, y controlar su comportamiento
setIsLoading(true); //Se ejecuta la función de actualización del estado que controla que se está "cargando" la petición web, la cual recibe como argumento, el valor booleano "true", para indicar que se está cargando la petición web
try { //Se ejecuta el bloque de, intentar, ejeuctar el siguiente bloque
**const newPost = {** //Declaración de constante con valor asignado de un objeto, el cual será envíado en la petición web con la infomación del formulario, el cual contiene las siguiente propiedades
**title: title,** //Propiedad del objeto con valor, del valor actual del estado "title" del componente
**body: body,** //Propiedad del objeto con valor, del valor actual del estado "body" del componente
**userId: createdPosts.length** //Propiedad del objeto con valor, del valor actual del estado "createdPosts" del componente, obtener su longitud, siendo respectiva la cantidad de elementos al nuevo post creado, así obtendrá un identificador único
**};**
**await fetch(BASE_URL + "/posts", {** //Se "espera" la respuesta de la petición web mediante la función asíncrona de peticiones web(fecth), mediante el uso de "await" permite que el código espere hasta que la promesa se resuelva, lo que significa que la solicitud se ha completado con éxito, la cual recibe como primer argumento, el valor de dicha constante, concatenado con dicha cadena de texto, la cual es la ruta para hacer dicha petición web, y como segundo argumento recibe un objeto de "opciones" de la petición para especificar el tipo de petición web que se hará, y demás información necesaria
**method: "POST",** //Propiedad del objeto con valor, para inidicar que será una petición "POST", indicando que se está creando un nuevo recurso en el servidor
**body: JSON.stringify(newPost),** //Propiedad del objeto la cual es la más importante con valor, desde el objeto JSON, ejecutar su método "stringify" para convertir el objeto newPost a una cadena JSON(texto) que puede ser enviada en la solicitud, el cual recibe como argumento el objeto "newPost" que contiene los datos del nuevo post que se enviarán al servidor
**headers: {** //Propiedad del objeto que especifica el encabezado HTTP, con valor de un objeto con las siguientes propiedades
**"Content-type": "application/json; charset=UTF-8"** //Propiedad del objeto que indica que el tipo de contenido del cuerpo de la solicitud es JSON, con valor, de que es un JSON, y que se utiliza el juego de caracteres UTF-8, para así asegurar que el servidor comprenda el formato de los datos enviados y pueda interpretarlos correctamente
**}
});**
setTitle(""); //Se ejecuta la función de actualización del estado que controla el valor del "título" de objeto a ser enviado en la petición web, la cual recibe como argumento, una cadena vacía, para resetear dicho "input" del formulario, siendo dicho valor el nuevo valor por defecto de su estado correspondiente
setBody(""); //Se ejecuta la función de actualización del estado que controla el valor del "cuerpo" de objeto a ser enviado en la petición web, la cual recibe como argumento, una cadena vacía, para resetear dicho "input" del formulario, siendo dicho valor el nuevo valor por defecto de su estado correspondiente
setCreatedPosts((prevPosts) => [newPost, ...prevPosts]); //Se ejecuta la función de actualización del estado "createdPosts", la cual recibe como argumento, una función flecha callback, la cual creará un nuevo arreglo que será el nuevo valor actual de dicho estado, siendo que dicha función callback recibe como argumento todos los "posts"/elementos ya contenidos, y ejecuta, un arreglo, que contiene el valor de dicha constante que es el objeto que se envío a la petición web y que contiene los datos del formulario, siendo colocado al inicio el post recién creado para ser el primero en ser mostrado, y como segundo "elemento" se coloca mediante la sintaxis de "propafación" los posts anteriores almacenados en el estado "prevPosts", manteniendo todos los posts creados previamente
} catch (error) { //Si no se pudo ejecutar el bloque de "try", se captura cualquier error que ocurra durante el proceso de creación del post, recibiendo como argumento, el error detectado, ejecutando el siguiente bloque
console.error(error); //A la consola del navegador, aplicar el método de errores, el cual recibe como argumento el error detectado para mostrarlo
} finally { //El boque final, se utiliza para resetear el componente a su estado por defecto, ejecutando el siguiente bloque
setIsLoading(false); //Se ejecuta la función de actualización del estado que controla que se está "cargando" la petición web, la cual recibe como argumento, el valor booleano "false", para indicar que ya NO se está cargando la petición web, siendo dicho valor el nuevo valor por defecto de su estado correspondiente
}
**}**
function Loading() { //Declaración de función que será un componente, la cual ejecuta el siguiente bloque
return ( //Se retorna una estructura de JSX, el cual será un mensaje de carga a ser renderizado, siendo colocado entre paréntesis
<p>Loading...</p> //Etiqueta de párrafo, la cual contiene el texto a ser mostrado
)
}
function ShowPost(post) { //Declaración de función que será un componente, recibe como argumento un "post" creado y enviado a la petición web, la cual ejecuta el siguiente bloque
return ( //Se retorna una estructura de JSX, el cual serán los datos del post" creado y enviado a la petición web a ser renderizado, siendo colocado entre paréntesis
<div> //Etiqueta contenedora de bloque
<h2>{post.title}</h2> //Etiqueta de subtítulo, la cual contiene entre llaves por ser código de JS, del "post" del parámetro, se accede a su propiedad de "titulo" para obtener su valor
<p>{post.body}</p> //Etiqueta de párrafo, la cual contiene entre llaves por ser código de JS, del "post" del parámetro, se accede a su propiedad de "body" para obtener su valor
<h4>id:{post.userId}</h4> //Etiqueta de subtítulo, la cual contiene texto, y entre llaves por ser código de JS, del "post" del parámetro, se accede a su propiedad de "userId" para obtener su valor
</div>
);
}
if (isLoading === true) return <Loading /> //Antes de renderizar el componente principal, se verifica el valor actual del estado "isLoading" mediante un condicional que valida si, el valor actual de uno de los estados del componente, es estrictamente igual que, el valor booleano true, retornando una estructura de JSX, el cual será el componente <Loading /> a ser renderizado
return ( //Se retorna una estructura de JSX, el cual será un formualrio para obtener los datos que se enviarán mediante la petición web y los mostrarán en un componente debajo del formulario, siendo colocado entre paréntesis
<div> //Etiqueta contenedora de bloque
**<form onSubmit={createPost}>** //Etiqueta de formulario, posee el atributo manejador de eventos de "entregar" los datos del formulario con valor de código de JS entre llaves, ejecutar la función asíncrona para hacer una petición web para crear un nuevo post/publicación para ser enviada como petición al servidor web/URL
<h1>Create a new POST</h1> //Etiqueta de título principal, la cual contiene texto a ser mostrado
<div> //Etiqueta contenedora de bloque
<label htmlFor="title">Título</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
<input //Etiqueta de ingreso de datos, posee los siguients atributos
onChange={(event) => setTitle(event.target.value)} //Propiedad manejadora del evento de "cambio" en valor de dicho input, con valor dentro de llaves por ser código de JS, de una función flecha, la cual recibe como argumento el evento de "cambio", ejeuctando la función de actualización del estado "title" del componente, la cual recibe como argumento, del evento "cambio" detectado, y acceder al elemento que lo ejecutó, para acceder a su valor, siendo el valor de dicho elemento, el nuevo valor del estado "title" y que será utilizado para colocarlo en dicho elemento
value={title} //"valor" con valor entre llaves por ser código de JS, de el valor actual del estado "title" como el valor del campo de entrada, esto asegura que el valor del campo se actualice automáticamente cuando cambie el estado "title"
id="title" //Selector "identificador" el cual lo enlazará con el label correspondiente
type="text" //"tipo" con valor para ser entrada de texo
name="title" //"nombre" que es el nombre del control, el cual es enviado con los datos del formulario
required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
/>
</div>
<div> //Etiqueta contenedora de bloque
<label htmlFor="body">Contenido</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
<textarea //Etiqueta de área de texto, posee los siguients atributos
onChange={(event) => setBody(event.target.value)} //Propiedad manejadora del evento de "cambio" en valor de dicha área de texto, con valor dentro de llaves por ser código de JS, de una función flecha, la cual recibe como argumento el evento de "cambio", ejeuctando la función de actualización del estado "body" del componente, la cual recibe como argumento, del evento "cambio" detectado, y acceder al elemento que lo ejecutó, para acceder a su valor, siendo el valor de dicho elemento, el nuevo valor del estado "title" y que será utilizado para colocarlo en dicho elemento
value={body} //"valor" con valor entre llaves por ser código de JS, de el valor actual del estado "body" como el valor del área de texto, esto asegura que el valor del área de texto se actualice automáticamente cuando cambie el estado "body"
id="body" //Selector "identificador" el cual lo enlazará con el label correspondiente
name="body" //"nombre" que es el nombre del control, el cual es enviado con los datos del formulario
required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
/>
</div>
<button disabled={isLoading}>Crear</button> //Etiqueta de botón, posee la propiedad de "desactivado", con valor entre llaves por ser código de JS, de el valor actual del estado "isLoading" del componente, y contiene texto, así dicha propiedad será controlada respecto del valor del dicho estado
</form>
{createdPosts.map((post, index) => ( //Dentro de llaves por ser código de JS, del estado "createdPosts" del componente el cual es un arreglo que contiente todo los "posts" creados meidante la petición web "POST", al cual se le aplica el método de crear un nuevo arreglo aplicando una función por cada objetos/post dentro de dicho arreglo, la cual recibe como argumento una función flecha, la cual recibe como primer argumento, cada uno de los objetos/post dentro del arreglo, y como segundo argumento el índice de dicho objetos/post dentro del arreglo, ejecutando el siguiente bloque por cada objetos/post
<ShowPost key={index} {...post} /> //Se renderiza como elemento HTML, el componente "ShowPost" el cual posee el atribut de "llave" la cual será una clave única para cada elemento, con valor dentro de llaves por ser código de JS, de el valor de "índice" del objeto/post que se está iterando, y también recibe dentro de llaves por ser código de JS, mediante la sintaxis de "propafación" los posts anteriores almacenados en el estado "createdPosts", manteniendo todos los posts creados previamente
))}
</div>
);
}
AXIOS:
Es una librería que ayuda con el fetching, lo cual son peticiones web, siendo que obligadamente se tiene que hacer la petición web con fetch() y a la respuesta aplicar el método *********json()*********.
- Cuando se tienen métodos de autenticación se debe mandar una API_TOKEN, lo cual es que por cada ruta se deberán colocar “headers: {}”, ”{api-key: }” en los cuales se deben mandar los API_TOKEN.
- En react, en la mayoría de los componentes se tendrán que utilizar los mismos métodos de configuración.
Axios proporciona una forma más práctica de interactuar con las peticiones web:
- Cliente HTTP basado en promesas para el navegador y node.js.
- Transformaciones automáticas para datos JSON.
Para implementarlo:
- Se debe instalar la librería axios en la ruta del proyecto, mediante ***npm***:
- npm install axios
-
Se importa axios desde la librería “axios”:
**import axios from "axios";** //Se importa **axios** desde la librería “**axios”**
SINTAXIS:
-
axios.get(URL):
- Para el método de obtener recursos web, se debe usar desde la librería de axios el método ***get*** y enviar como argumento la URL a la cual se le hará la petición.
-
axios.post(URL, object):
- Para el método de crear un nuevo recurso en el servidor web, se debe usar desde la librería de axios el método post y enviar como primer argumento la URL a la cual se le hará la petición, y como segundo argumento, el objeto que contiene los datos del nuevo recurso a crear.
Global Configuration:
Axios también proporciona opciones de configuración global que afectan a todas las solicitudes realizadas en la aplicación. Esto permite establecer valores predeterminados para la URL base, encabezados comunes y otras opciones. Al configurar estas opciones a nivel global, se evita tener que repetir estas configuraciones en cada solicitud individual.
-
axios.defaults.baseURL = 'https://api.example.com';
- Configura la URL base que se utilizará para todas las solicitudes. De esta manera, no es necesario escribir la URL completa en cada solicitud, sino que se puede utilizar una ruta relativa
-
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
- Establece un encabezado común de autorización para todas las solicitudes. AUTH_TOKEN debe ser reemplazado por el token de autorización válido para la API, como una cadena de texto o un token de autenticación válido.
-
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
- Establece el encabezado 'Content-Type' para todas las solicitudes POST realizadas con Axios. Dependiendo de los requisitos de la API, es posible que sea necesario cambiar este valor a 'application/json' u otro tipo de contenido adecuado para la solicitud POST
EJEMPLO GET AXIOS:
import { useEffect, useState } from "react"; //Se importan la funciones hooks, para controlar los efectos secundarios, y los estados de un componente, desde, la librería de React
**import axios from "axios";** //Se importa axios, desde, la librería axios, para realizar solicitudes web HTTP
**axios.defaults.baseURL = "https://api.thecatapi.com/v1";** //Desde la librería axios, se establecen las configuraciones globales por defecto, estableciendo la URL base para todas las solicitudes Axios, con valor asignado de, una cadena de texto que será la URL API a la cual se le harán las peticiones
**axios.defaults.headers.common["X-Api-Key"] =** //Desde la librería axios, se establecen las configuraciones globales por defecto, estableciendo una "cabecera común" "X-Api-Key" para todas las solicitudes Axios, con valor asiginado de
**"27a5c999-8a4d-4085-951a-bbdc0c23fb6e";** //Una cadena de texto, la cual es una clave de API válida proporcionada por la API "The Cat API"
export default function App() { //Se exporta como valor por defecto, la declaración de función, que será un componente, la cual ejecuta el siguiente bloque
const [**cats**, setCats] = useState([]); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, un arreglo vacío, que contendrá los recursos obtenidos de la petición
const [status, setStatus] = useState("loading"); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor booleano "false", indicando un estado de "cargando" al hacer la petición web, en false porque no se está cargando nada por defecto
useEffect(() => { //Se llama a ejecutar la función hook para manejar efectos secundarios en componentes, la cual recibe como primer argumento, una función flecha callback, la cual ejecuta el siguiente bloque
async function loadcats() { //Declaración de función asíncrona, la cual hará la función de obtener los recursos desde una petición web a un servidor, y que ejecuta el siguiente bloque
try { //Se intenta ejecutar el siguiente bloque
**const response = await axios.get("/categories");** //Declaración de constante, con valor asignado de, "esperar" la respuesta, de ejecutar, desde la librería de "axios", el método de petición web para obtener rescursos, el cual recibe como argumento, una ruta relativa("/categories") la cual es concatenada en automático con la URL base configurada para uso global
**const newCats = response.data;** //Declaración de constante con valor asignado de, de la respuesta obtenida, obtener los datos, los cuales ya fueron convertidos a formato json para acceder a ellos
**setCats(newCats);** //Se ejecuta la función de actualización del estado "cats", el cual recibe como argumento, el valor de los datos de la respuesta a la petición web, siendo dicho valor, el nuevo valor actual del estado
setStatus("success"); //Se ejecuta la función de actualización del estado "status", el cual recibe como argumento, la cadena de texto "success", siendo dicho valor, el nuevo valor actual del estado
} catch(error) { //Si no se pudo ejecutar el bloque de "try", se captura cualquier error que ocurra durante el proceso de creación del post, recibiendo como argumento, el error detectado, ejecutando el siguiente bloque
console.error(error); //A la consola del navegador, aplicar el método de errores, el cual recibe como argumento el error detectado para mostrarlo
setStatus("error"); //Se ejecuta la función de actualización del estado "status", el cual recibe como argumento, la cadena de texto "error", siendo dicho valor, el nuevo valor actual del estado
}
}
setTimeout(() => { //Se establece un tiempo de espera, la cual recibe como primer argumento una función flecha callback, la cual ejecuta el siguiente bloque
loadcats(); //Se llama a ejcutar la función asíncrona para obtener los recursos desde una petición web con axios
}, 1000); //Como segundo argumento, se coloca el tiempo en milisegundos en que será ejecutada dicha función anterior, siendo en un segundo
}, []); //Como segundo argumento, recibe un arreglo vacío, así ejecutando el efecto secundario la primera y última vez que se renderice el componente, esto garantiza que el efecto solo se ejecute una vez al inicio
if (status === "loading") return <div>Loading...</div>; //Antes de renderizar el componente principal, se verifica el valor actual del estado "status" mediante un condicional que valida si, el valor actual de dicho estado del componente, es estrictamente igual que, la cadena de texto "loading", retornando una estructura de JSX, el cual será un componene, siendo un contendor de bloque, el cual contiene texto a ser mostrado
if (status === "error") return <div>Error</div>; //Antes de renderizar el componente principal, se verifica el valor actual del estado "status" mediante un condicional que valida si, el valor actual de dicho estado del componente, es estrictamente igual que, la cadena de texto "error", retornando una estructura de JSX, el cual será un componene, siendo un contendor de bloque, el cual contiene texto a ser mostrado
return ( //Se retorna una estructura de JSX, el cual será un formualrio para obtener los datos que se enviarán mediante la petición web y los mostrarán en un componente debajo del formulario, siendo colocado entre paréntesis
<div> //Etiqueta contenedora de bloque
<h1>Cats</h1> //Etiqueta de título principal, contiene texto
<section> //Etiqueta de sección dentro de la página
{**cats**.map((cat) => ( //Dentro de llaves por ser código de JS, al estado actual del estado "cats" el cual es un arreglo que contiene los objetos de la respuesta a la petición web mediante "axios", se le aplica el método de crear un nuevo arreglo aplicando una función por cada elemento dentro del arreglo iterado, el cual recibe como argumento una función de flecha callback, la cual por cada objeto(cat) dentro de dicho arreglo, se ejecuta el siguiente bloque
<article key={cat.id}> //Etiqueta de contenido independiente dentro de la página, la cual posee el atributo "key" con el valor de la propiedad "id" de cada obejto(cat), ésto para ayudar a React a identificar de manera única cada elemento y mejorar el rendimiento en operaciones de actualización
{cat.id} - {cat.name} //Dentro de llaves por ser código de JS, del objeto(cat) acceder al valor de su propiedad "id" para mostrarla, un guión, y entro de llaves por ser código de JS, del objeto(cat) acceder al valor de su propiedad "name" para mostrarla
</article>
))}
</section>
</div>
);
}
EJEMPLO GET AXIOS:
import { useState } from "react"; //Se importa la función hook para controlar el estado de un componente, desde, la librería de react
**import axios from "axios";** //Se importa axios, desde, la librería axios, para realizar solicitudes web HTTP
**axios.defaults.baseURL = "https://jsonplaceholder.typicode.com";** //Desde la librería axios, se establecen las configuraciones globales por defecto, estableciendo la URL base para todas las solicitudes Axios, con valor asignado de, una cadena de texto que será la URL API a la cual se le harán las peticiones
**axios.defaults.headers.post["Content-Type"] =** //Desde la librería axios, se establecen las configuraciones globales por defecto, estableciendo una "cabecera común" "Content-Type" para todas las solicitudes Axios, con valor asiginado de
**"application/json; charset=UTF-8";** //Una cadena de texto, la cual es el tipo de archivo el cual es un json, y que se utiliza el juego de caracteres UTF-8, para así asegurar que el servidor comprenda el formato de los datos enviados y pueda interpretarlos correctamente
export default function App() { //Se esporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguiente bloque
const [isLoading, setIsLoading] = useState(false); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor booleano "false", para indicar un estado de carga, empezando siendo falso
**async function createPost(event) {** //Declaración de función asíncrona para crear un nuevo recurso en un servido web mediante una petición, la cual recibe como argumento un evento ejecutado, y que ejecuta el siguiente bloque
event.preventDefault(); //A dicho evento ejecutado, se le aplica el método para prevenir su comportamiento por defecto, para controlarlos
setIsLoading(true); //Se llama a ejecutar la función de actualización del estado "isLoading", la cual recibe como argumento el valor booleano "true", siendo dicho valor el nuevo valor actual de dicho estado, para indicar que el estado de carga está activo
try { //Se intenta ejecutar el siguiente bloque
const form = event.currentTarget; //Declaración de constante con valor asignado de, del evento ejecutado en la función componente, acceder a elemento que lo ejecutó, el cual es un formulario
const newPost = { //Declaración de constante con valor asignado de, un obejto que será el nuevo recurso a ser creado en el servidor web, el cual contiene las siguientes propiedades
title: form.title.value, //Propiedad de objeto que será el título del recurso, con valor asignado de, del formulario, acceder al elemento que posee el identificador "title", y obtener su valor
body: form.body.value, //Propiedad de objeto que será el cuerpo del recurso, con valor asignado de, del formulario, acceder al elemento que posee el identificador "body", y obtener su valor
userId: 1 //Propiedad de objeto que será el identificador del recurso, con valor asignado de, el valor numérico 1
};
**const response = await axios.post("/posts", newPost);** //Declaración de constante, con valor asignado de, "esperar" la respuesta, de ejecutar, desde la librería de "axios", el método de petición web para crear rescursos, el cual recibe como primer argumento, una ruta relativa("/posts") la cual es concatenada en automático con la URL base configurada para uso global, y como segundo argumento recibe el objeto "newPost" que será el nuevo recurso a crear
console.log(**response**); //A la consola del navegdor, se le aplica el método de imprimir sobre la misma, la respuesta a la petición web
form.reset(); //Al formulario, se le aplica el método para reseterarlo, para resetear los campos del mismo
} catch (error) { //Si no se pudo ejecutar el bloque de "try", se captura cualquier error que ocurra durante el proceso de creación del post, recibiendo como argumento, el error detectado, ejecutando el siguiente bloque
console.error(error); //A la consola del navegador, aplicar el método de errores, el cual recibe como argumento el error detectado para mostrarlo
} finally { //Se ejecuta el bloque final, el cual ejecuta el siguiente bloque
setIsLoading(false); //Se llama a ejecutar la función de actualización del estado "isLoading", la cual recibe como argumento el valor booleano "false", siendo dicho valor el nuevo valor actual de dicho estado, para indicar que el estado de carga ya no está activo
}
**}**
if (isLoading === true) return (<div>Loading...</div>); //Antes de renderizar el componente principal, se verifica el valor actual del estado "isLoading" mediante un condicional que valida si, el valor actual de dicho estado del componente, es estrictamente igual que, el valor booleano "true", retornando una estructura de JSX, el cual será un componene, siendo un contendor de bloque, el cual contiene texto a ser mostrado
return ( //Se retorna una estructura de JSX, el cual será un formualrio para obtener los datos que se enviarán mediante la petición web y los mostrarán en un componente debajo del formulario, siendo colocado entre paréntesis
**<form onSubmit={createPost}>** //Etiqueta de formulario, posee el atributo manejador de eventos de "entregar" los datos del formulario con valor de código de JS entre llaves, ejecutar la función asíncrona para hacer una petición web para crear un nuevo post/publicación para ser enviada como petición al servidor web/URL
<div> //Eiqueta contenedora de bloque
<label htmlFor="title">Título</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
<input id="title" type="text" name="title" /> //Etiqueta de ingreso de datos, posee un selector identificador, y los atributos de "tipo" con valor para se de entrada de texto, y el de "nombre" que es el nombre del control, el cual es enviado con los datos del formulario
</div>
<div> //Eiqueta contenedora de bloque
<label htmlFor="body">Contenido</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
<textarea id="body" name="body" /> //Etiqueta de área de texto, posee un selector identificador y el atributo de "nombre" que es el nombre del control, el cual es enviado con los datos del formulario
</div>
<button disabled={isLoading}>Crear</button> //Etiqueta de botón, posee la propiedad de "desactivado", con valor entre llaves por ser código de JS, de el valor actual del estado "isLoading" del componente, y contiene texto, así dicha propiedad será controlada respecto del valor del dicho estado
</form>
);
}
Top comments (0)