No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Inserci贸n de los datos del producto en la API

21/31
Recursos

Aportes 11

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

A todos los que estan haciendo la escuel de javaScript鈥 felicidades por llegar tan lejos!! Es evidente la escasez de comentarios asi que aca les dejo lo que entendi de esta clase

Mira que subi unas Imagnes y rompi algo, luego las borre con postman usando el delete pero creo que es facil romper la API, creo

Clase #21: Inserci贸n de los datos del producto en la API 21/31 馃摜


Continuando con el Proyecto: 馃敤


Vamos agregar nuevos productos a la API, la l贸gica constituir谩 funciones para el llamado de GET Products. Se crea el archivo products.js en la ruta src/services/api

La l贸gica en products.js queda:

import axios from 'axios'; //Se usa axios para hacer las peticiones
import endPoints from '@services/api';

//body ser谩 el cuerpo de la informaci贸n
const addProduct = async (body) => {
    const config = {
        headers: {
            accept: '*/*', //Permite cualquier petici贸n
            'Content-Type': 'application/json',
        },
    };
    const response = await axios.post(endPoints.products.addProducts, body, config);
    return response.data; //data contiene la respuesta delll servidor
};

export { addProduct };


En el archivo FormProduct.js en la ruta src/components se agrega el import de addProduct:

import { addProduct } from '@services/api/products';


Tambi茅n dentro de handleSubmit despu茅s de la constante data:

addProduct(data).then((response) => {
      console.log(response);
    });


Guardamos y ejecutamos npm run dev

En local: http://localhost:3000/dashboard/products al dar el bot贸n de Add Product se ingresan los datos y al dar bot贸n Save podemos ver en la API (enlace: aqu铆) que se agreg贸 el id el producto recientemente agregado y los datos que ingresamos.

Tambi茅n podemos ver en el Inspector Web en consola se imprimi贸 los datos del nuevo producto.

El c贸digo de esta clase:

import endPoint from '@services/endPoint';
import axios from 'axios';

const addProduct = async (body) => {
  const config = {
    headers: {
      accept: '*/*',
      'Content-Type': 'aplication/json',
    },
  };
  const response = await axios.post(endPoint.products.addProduct, body, config);

  return response.data;
};

export default addProduct;

services/api/products

tambi茅n podemos a帽adir un catch en la respuesta de addProduct y escribirlo de esta forma

addProduct(data)  
  .then(console.log)
  .catch(console.error)
const handleSubmit = (e)=> {
    e.preventDefault();
    const formData = new FormData(formRef.current);
  
    const data = {
      "title": formData.get("title"),
      "price": parseInt(formData.get("price")),
      "description": formData.get("description"),
      "categoryId": parseInt(formData.get("category")),
      "images": [
        formData.get("images").name,
      ]
    }

    addProduct(data)  
      .then(console.log)
      .catch(console.err)
}

Cuando guarde el archivo products.js en 鈥榮ervice/api/鈥 coloque al final del codigo :

export default addProduct;

en lugar de:

export { addProduct };

Ojo a eso, para no tener un error al momento de importarlo tal cual en la clase

mi error 400, fue que la imagen que subia para el ejemplo tenia un nombre con espacio, as铆 que cambie el nombre del ejemplo a algo como pepe.png y funciono

Si alguno tiene error 400 (Bad Request) revisen que la propiedad del producto sea (categoryId) no solo (category), porque la api espera un categoryId no un category

Hola que tal, en caso de que alguien tenga problemas con las imagenes, en mi caso recibia el Error 401 del server pero cambie la imagen a una que no tiene espacios en el nombre y por fin funcion贸. Considerenlo鈥

Si alguno tiene un error 400(Bad Rquest),revise el objeto de error que aparece en la consola del navegador.

Uncaught in Promise:

e.response.data.message

Deber铆a darles mas pistas de que esta mal.

Este proyecto es de cursos anteriores, muestra los productos de la API en tiempo real:
馃敶 https://ecommerce-logo.netlify.app/
Cada producto que agreguen en el formulario aparecera aqui.