Curso JavaScript: 120. API REST: CRUD con Axios: (2/2) - #jonmircha

En este video creo un #CRUD con #JavaScript consumiendo los datos de una #API #REST con la librería #Axios.

[timawid]

Excelente 👏😎 Estas clases son amazing 💎💎💎💎💎

[Black_Coding]

Muchas gracias por estas clases Jon! Fueron muy útiles!. Para los que actualmente están teniendo problemas con que los nombres y constelaciones no les aparece, con los nuevos cambios de Axios su código debería verse así:

if(!e.target.id.value) {
//Create - POST
try {
let data = {
nombre: e.target.nombre.value,
constelacion: e.target.constelacion.value
},
json = await res.data;

location.reload();
} catch (err) {
let message = err.statusText || "Ocurrió un error";
$form.insertAdjacentHTML("afterend", `<p><b>Error ${err.status}: ${message}</b></p>`);
}

La misma lógica tienen que aplicarla con el PUT y el DELETE.

PD: Si quieren que cuando hagan click en el boton Eliminar les aparezca el nombre del caballero, pueden poner en la linea del confirm asi:
let isDelete = confirm(`¿Estás seguro de eliminar al Caballero
Gracias Jon por enseñarnos a viajar atreves del DOM también.

[vanessaquiquiaventocilla]

Excelente clase profe. Para aquellos que recién esten tomando el curso posiblemente tengan problemas de agregar y editar con el JSON-SERVER - AXIOS, si les pasa el error posiblemente sea porque en el headers les falta poner el "Content-Type" si observan bien en la clase el "Type" esta en minúscula.

Gracias profe.

[juancruzledesma]

Profe, a lo que usted hizo, le agregue un pequeño detalle (como para hacerlo mas agradable):

Cuando estamos creando el metodo "getAll" y le asignamos al "dataAttribute id" del boton "delete" el "id" del elemento en cuestión, decidí asignarle tambien un "dataAttribute name" que tenga el nombre del elemento en cuestion:
= el.nombre;

Para que de esta manera, cuando mas adelante le damos click en eliminar y que nos salga: "¿Estas seguro de eliminar al id ... ", nos salga: "¿Estas seguro de eliminar a NOMBRE?"
Obviamente que en vez de concatenar al "e.target.dataset.id", lo hice con el "name":
let isDelete = confirm(`¿Estas seguro de eliminar a ${e.target.dataset.name}?`)

[leomax]

Excelente Jon. Siempre tan claro. Capo total!!

[timawid]

Muchísimas gracias por todo lo que haces por nosotros ⭐️⭐️⭐️⭐️⭐️

[instintoimagen]

este es el mejor #curso de #javascript de youtube

[ougwphs]

Profesor Jon, primero quiero agradecer el gran gesto de compartir su conocimiento con toda esta comunidad. Que alegría haber coincidido con sus cursos. Comence este de Js desde cero después de terminar el de HTML y CSS, no soy informático de profesión sin embargo decidí aprender programación web sin tener ningun conocimiento previo y estoy aprendiendo mucho con usted. He llegado hasta aqui video tras video, y justo hoy he tenido dificultad para hacer el POST con Axios. Por alguna razon los datos de nombre y constelación que escribo en el formulario no se crean en mi tabla. Solo agrega el ID. Parece ser que no está transformando la data a JSOn y no entiendo porque si estoy siguiendo al pie de la letra el video 😢. Por favor AYUDAAAA!!! MUCHAS GRACIAS PROFE.

[diegomeneses]

he necesitado conocer conceptos basicos ya que soy novato, y la manera en que enseña "la historia" sobre el tema a tratar y su correlacion con el por que se uso, se usa, y se debe empezar a usar es lo que mas me ha gustado. agradecido enormemente con el proyecto que hizo y lo plasmo en este curso.

[carlesbautista]

Muchas gracias Jon, tengo ganas de ver los ejercicios. Encuentro muy bien que nos des a conocer varias herramientas para poder manejar-nos, y como tu dices no vale la pena buscar-te dolores de cabeza si con 16kb que pesa Axios lo solucionas.:)

[adrianmartinez]

Gracias por todo este contenido de calidad Profe!

[ishtarandseth]

Faltó cambiar los nombres de los errores de err.status a err.response.status y err.response.statusText, como el en video 109 de axios :)

[diegoalexisaguirre]

Muchas gracias Profesor! Un abrazo enorme de total agradecimiento! Dios lo bendiga

[danielfabiani]

gracias Jon, me esta costando un poco adaptar la actualización de axios al ejercicio. Voy a tratar de engancharlo bien para no morir en la tanda de ejercicios. saludos

[TheDawnBreaker]

Que orden y que facilidad de entender las cosas. Muchas gracias Jon

[A.RadelM.F.]

Profesor, ya que terminaron las clases de este tema, yo, después de ver cómo hizo con XMLHttpRequest, yo apliqué el mismo principio en los desafios para fetch y axios, le muestro:

fetch:
let fetchData = async (config, success, unsuccess)=>{
let {url, method, headers, body} = config
try {

let bodyString = JSON.stringify(body)

let response = await fetch(url, {method, headers, body: bodyString})

if (!response.ok) throw {status: response. status, statusText: response. statusText, response}

let data = await response. json()

success(data)

} catch (err) {
let errorText = err. statusText || 'Ha ocurrido un error inesperado',
errorMessage = `Error ${err. status}: ${errorText}`
unsuccess(errorMessage)
}

}

Axios:

let axiosRequest = async (config, success, error)=> {
try {
let response = await axios(config)

data = response. data
success(data)

} catch (err) {
let errorRequest = {
statusText: err. response. statusText || 'Ocurrió un error inesperado',
status: err. response. status
}
error(errorRequest)

}
}

Modulé en diferentes funciones cada gestión, usando callbacks en las peticiones de AJAX y fetch para detallar la lógica específica de gestión en cada caso, pero manteniendo una función reutilizable para las solicitudes a la API.

[davidlionheart]

Yo hice diferente profe. En vez de crear un objeto options cree una variable y guarde la respuesta del metodo axios

let res = await axios({
method: "post",
data:{
name: e.target.name.value,
constellation: e.target.constellation.value
}
})
Dentro del metodo se puede colocar un objeto y ahi especificar las propiedades que necesitas en la peticion. Eso lo aprendi en la documentacion de Axios

[Sebastian-fjwn]

Ante todo, gracias por la dedicación y el gran apoyo que nos brindas. Solo tengo una sugerencia para quienes estén viendo en pleno Noviembre/2022. Leyendo la documentación axios me he dado cuenta que hay algunos cambios y les recomendaría se dieran un paso si están interesados. Así fue como realice mi método POST:
try {
breed: e.target.breed.value,
size: e.target.size.value,
});
$form.reset();
} catch (error) {
alert(error);
}

[dan_seb]

Es impresionante la información importante que enseñas de una manera muy comprensible, te agradezco mucho Jon! Te mereces lo mejor

[aaronjesuspadillaramirez]

En videos anteriores habia mencionado que me quedaba con fetch en estos momento y tras analizar lo expuesto por el profesor me doy cuenta de que en realidad se trata de analizar los requerimientos del proyectos para saber si utilizar fetch o en su defecto axios. Gracias profesor.