Fetch POST

Clase 14 de 26 • Curso de Asincronismo con JavaScript

Santiago Lopera Naranjo

student•

Si quieres profundizar mas en estos temas de fetch, en Platzi el profe JuanDa tiene un saga de tres cursos de basico a profesional en el tema de peticiones HTTP.

Si te interesa aquí tienen dichos cursos: https://platzi.com/cursos/api/ https://platzi.com/cursos/api-practico/ https://platzi.com/cursos/api-profesional/

Dario Paladines

student•

Muy recomendado que tomen esos cursos para que entiendan en cuanto a peticiones a api, endpoint, queryparameters y los métodos GET, POST, PUT-PATCH, y DELETE, y sobretodo lleven el asincronismo desde la teoria hasta la práctica. Yo estoy ya haciendo el último, y si se entiende un poco mejor este curso después de haber tomado esos. Ya que la primera vez que vi este curso estuve un poco mucho perdido.

Carlos Abad Garcia Perez

student•

Entonces recomienda mejor tomar esos cursos antes de este?

Maria Gabriela Rodriguez Cuevas

student•

📂 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟮: 𝗙𝗲𝘁𝗰𝗵 𝗣𝗢𝗦𝗧 𝟭𝟮/𝟮𝟭 📂 . ++Repasando algunas de las característica del protocolo http:++ .

Los verbos indican acciones, estás acciones están asociadas a peticiones y recursos. En línea general sirve para la manipulación de recursos cliente/servidor. Los códigos de estados, los códigos son valores números que tienen un valor semántico.

. ++Algunos Verbos http son:++ . GET → Sirve para solicitar recurso. POST → Sirve para la creación de recursos en el servidor. PUT → Sirve actualizar por completo un recurso. DELETE → Sirve para eliminar un recurso. . 🔨 En el ejemplo de la clase se usa POST para guardar (enviar a la API) información en lugar de obtener con GET (recibir). . ⚠️ Hay permisos que se deben tomar en cuenta para que el intercambio sea seguro, hay que especificar el modo (mode), aquí se indica si se permite solicitudes de origen cruzado. . 🔀 ++¿Qué es un origen cruzado?++ . Un origen tiene dominio/protocolo/puerto, un origen cruzado denominado “++Cross Origin++” es la palabra que se utiliza para denominar el tipo de peticiones que se realizan a un dominio diferente del dominio de origen desde donde se realiza la petición. Así que si se coloca cors, indica que se permiten ciertas solicitudes predeterminadas de origen cruzado como GET y POST para salvaguardar y evitar manipulaciones maliciosas. En el enlace detallan más sobre el concepto de Cors: aquí .

Ir a VSC, en la ruta src/promise crear el archivo challenge-post.js
El código queda así (está comentado):

import fetch from 'node-fetch';
const API = 'https://api.escuelajs.co/api/v1';

function postData(urlApi, data) {
    //ya no se solicita informarción si no se guardará información
    const response = fetch(urlApi, {
        method: 'POST', //tiene que ir en mayúscula
        mode: 'cors', //cors es el permiso que va a tener, por defecto va estar siempre en cors
        credentials: 'same-origin', //es opcional
        headers:{
            'Content-Type': 'application/json' //necesario indicar que lo que se está enviando es de tipo json
        },
        body: JSON.stringify(data) //el método JSON.stringify() convierte un objeto o valor de JavaScript en una cadena de texto JSON
    });
    return response;
}

//En https://fakeapi.platzi.com/doc/products se consigue la estructura de como debe ser el objeto que se quiere crear con POST
const data = {
    "title": "Nunca pares de aprender",
    "price": 2,
    "description": "A description",
    "categoryId": 1,
    "images": ["https://placeimg.com/640/480/any"]
}

//podemos usar el postData como una promesa y con .then obtener la respuesta como un objeto json y mostrarlo después en la consola
postData(`${API}/products`, data)
    .then(response => response.json())
    .then(data => console.log(data));

. 🖥️ ++¿Cómo ver la salida después del POST?++

En el OUTPUT de la consola de VSC si todo está OK no debería salir un 400 (Bad Request).
Para ver el objeto creado en el navegador, copiamos la dirección: https://api.escuelajs.co/api/v1/products/ y colocamos al final el número arrojado por la id del OUTPUT, si el id es 271, sería: https://api.escuelajs.co/api/v1/products/271 .

🎨 ++Ejemplo para actualizar un objeto con PUT:++

//Con PUT para actualizar un objeto
function putData(urlApi, dataUpdate) {
    const response = fetch(urlApi, {
        method: 'PUT',
        mode: 'cors',
        credentials: 'same-origin',
        headers:{
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataUpdate)
    });
    return response;
}

const dataUpdate = {
    "title": "Se puede cambiar tambien otras caracteristicas",
    "price": 10 // no es necesario colocar todas las características del objeto, solo las que se cambiarán
}

putData(`${API}/products/271`, dataUpdate) //se debe colocar el id del objeto que se quiere modificar
    .then(response => response.json())
    .then(dataUpdate => console.log(dataUpdate));

. 🗑️ ++Ejemplo para eliminar un objeto con DELETE:++

//Eliminar un objeto indicando el id con DELETE
function deleteData(urlApi) { //no es necesario pasar la data
    const response = fetch(urlApi, {
        method: 'DELETE',
        mode: 'cors',
        credentials: 'same-origin',
        headers:{
            'Content-Type': 'application/json'
        } //no es necesario especificar el body
    });
    return response;
}

const idNumber = 271; //se debe colocar el id del objeto qu se quiere modificar

deleteData(`${API}/products/${idNumber}`) //no es necesario pasar data
    .then(() => {
        console.log(`Borrado ${idNumber}`); //es opcional imprimir en consola
    });

Deniss Bonilla Paredes

student•

Buenísimo tu ejemplo para eliminar un producto Gracias :)

Yezid Garcia Medina

student•

Excelentes apuntes :-) y ejemplo de los dos casos adicionales

Miguel Enrique Velásquez Millán

student•

Pensaste que era un producto cualquiera de la Fake Store API de Platzi, pero era yo: ¡DIO!

Ja ja ja ja, espero que a nadie le moleste, me hizo mucha gracia la idea de añadir el meme de DIO como producto y al final sí lo terminé añadiendo 🤣. Su ID es el 215. · Ojalá no lo borren, sería cool que se pudiera mantener y que los futuros estudiantes que hagan el curso les salga DIO cuando hagan su primer GET, ja ja ja ja ja, sería muy chistoso 😂. · Pero bueno, iguamente asumo que es muy probable que lo terminen borrando en algún momento como ya ha pasado con otros productos por el mero hecho de que, nosotros como estudiantes de este curso, de seguro en algún momentito intentaremos probar a usar el DELETE con algún producto random para poner en práctica lo de las clases (y cabe la posibilidad de que en algún momentito DIO termine siendo ese producto random a borrar)... Aunque estaría muy cool que no sucediera, je je 😊. · ++Output del .json de DIO como producto:++

{ 
	title: "¡DIO!",
	price: 710,
	description: "Pensaste que era un producto cualquiera de la Fake Store API de Platzi, pero era yo: ¡DIO!",
	images: ["https://i.imgur.com/USxXB5a.jpg"],
	category: {
		id: 5,
		name: "Others",
		keyLoremSpace: "random",
		image: "https://api.lorem.space/image?w=640&h=480&r=407"
	},
	id: 215
}

Miguel Enrique Velásquez Millán

student•

Acabo de revisar y... Ya lo borraron, ja ja ja ja ja 🤣. Chale... Pobre DIO, no duró ni día, ja ja ja.

Servio Gabriel Pachard Velez

student•

jajajaja si ya lo borraron

Charles Castillo Rosas

student•

import fetch from "node-fetch";
const API = "https://api.escuelajs.co/api/v1";

function postData(urlApi, data) {
  const response = fetch(urlApi, {
    method: "POST",
    mode: "cors",
    credentials: "same-origin",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });
  return response;
}

const data = {
  title: "New Product Course",
  price: 9999,
  description: "A description",
  categoryId: 1,
  images: ["https://placeimg.com/640/480/any"],
};

postData(`${API}/products`, data)
  .then((response) => response.json())
  .then((data) => console.log(data));

Alfredo Olmedo

student•

CORS (Cross-Origin Resource Sharing) es un sistema, que consiste en transmitir encabezados HTTP , que determina si los navegadores bloquean el acceso del código JavaScript frontend a las respuestas para solicitudes de origen cruzado.

La política de seguridad del mismo origen prohíbe el acceso de orígenes cruzados a los recursos. Pero CORS brinda a los servidores web la capacidad de decir que desean optar por permitir el acceso de origen cruzado a sus recursos. MDN

Bryan David Castañeda Aranzales

student•

El hacer el mismo problema con diferente herramientas genera que veamos un panorama más amplio y que todos los dev que vean esto puedan seleccionar una u otra opción dependiendo de su caso específico.

Fidel Parabacuto

student•

Buenísimo este curso. Les dejo cómo apliqué el método DELETE para eliminar el item y el método PUT para modificar el precio

Juan Guillermo Perez Cardozo

student•

hey que buen aporte

Ramsés Castañeda

student•

Existen métodos creados para diferentes fines y que se pueden usar (en este caso, esta API):

'Get': Para obtener
'Post': Enviar
'Put': Actualizar
'Delete' Para eliminar.

Eduer Pallares Jiménez

student•

UPDATE:

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1/products/';

function updateData(urlApi, data) {
  return fetch(
    urlApi,
    {
      method: 'PUT',
      mode: 'cors',
      credentials: 'same-origin',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data),
    },
  );
}

const dataUpdate = {
  title: 'Red shirt updated',
  price: 300
};

updateData(`${API}217`, dataUpdate)
  .then(responde => responde.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Marcos Montiel Cruz

student•

Estoy maravillado con este curso, soy un novato pero sin duda estoy entendiendo mucho mejor este tema con este curso. Hice update y delete de la siguiente forma y funcionó a la primera :D

Update (solo cambié 'POST' por 'PUT'):

const updateData = (urlApi, data) => {
    const response = fetch(urlApi, {
        method: 'PUT',
        mode: 'cors',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
    });
    return response;
};

Y para Delete quité headers y body puesto que lo unico que mandamos es el ID en la url para eliminar el producto de acuerdo con la documentación.

const deleteData = (urlApi) => {
    const response = fetch(urlApi, {
        method: 'DELETE',
        mode: 'cors',
        credentials: 'same-origin',
    });
    return response;
};

Juan Carlos Domínguez Pérez

student•

hare un bucle que agregue unos 1000 registros

Juan Carlos Domínguez Pérez

student•

solo tardo 12 seg ![](

Milagro García

student•

No entiendo nada

Porfirio González López

student•

Apunte en Notion

Diego Marin Lopez

student•

No me gusta para nada este tipo como explica

Critica constructiva

Eduer Pallares Jiménez

student•

DELETE:

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1/products/';

function deleteData(urlApi, data) {
  return fetch(
    urlApi,
    {
      method: 'DELETE',
      mode: 'cors',
      credentials: 'same-origin',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data),
    },
  );
}

deleteData(`${API}214`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Claudio Alexis Sepúlveda Valdebenito

student•

Hola, te propongo lo siguiente, sin data:

Eduer Pallares Jiménez

student•

@claudioasv buena propuesta

Gerson Estuardo Alvarado Hernández

student•

En Firefox se pueden ver los JSON de forma más ordenada y ver algunos detalles extra sin instalar ninguna extensión.

Víctor Estrada

student•

Se me ocurrió hacer este código para practicar get y post

'use strict'

/* Se está utilizando fetch 2.6.11 debido a que la versión 3 no tiene compatibilidad con commonjs. Si se trata de obtener el node-fetch de la forma enseñada en el curso, hay errores debido a que también se está usando un require más abajo para poder conseguir datos desde la consola */
const fetch = require('node-fetch')
const prompt = require('prompt-sync')();

const API = 'https://api.escuelajs.co/api/v1';



//función para obtener datos
const fetchData = (urlAPI)=>{
    return fetch(urlAPI);
}

//función para enviar datos
const PostData = (urlAPI, data)=>{
    const response = fetch(urlAPI, {
        method: 'POST',
        mode: 'cors',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });

    return response;
}


//lógica
let option = prompt('Would you like to use GET or POST?');

while(option.toUpperCase() != 'GET' && option.toUpperCase() != 'POST'){
    console.log("You need to specify if we're gonna be using GET or POST");
    option = prompt('Would you like to use GET or POST?')
}

if(option.toUpperCase() === 'GET'){
    console.log("Please specify the ID of the product you'd like to get. ");
    let ID = parseInt(prompt("ID: "));
    
    while(isNaN(ID)==true || ID<0){
        console.log("You need to specify the ID of the product you'd like to see. It cannot be negative values");
        console.log("Please specify the ID of the product you'd like to get. ");
        ID = parseInt(prompt("ID: "));
    }

    fetchData(`${API}/products/${ID}`).then((response)=>{
        return response.json()
    }).then((showProduct)=>{
        console.log(showProduct)
    }).catch((error)=>{
        console.log(error)
    }).finally(()=>{
        console.log("END")
    })

}else{
    console.log("Please spicify the data of the product you'd like to send to the API.");
    let name = prompt('name: ');
    let price = prompt('price: ');
    while(isNaN(price)==true || price < 0){
        console.log("You need to set a positive numerical value as the price");
        price = prompt('price: ');
    }

    const data = {
        "title": name,
        "price": price,
        "description": "A description",
        "categoryId": 1,
        "images": ["https://placeimg.com/640/480/any"]
    };

    PostData(`${API}/products`, data).then((conversion)=>{
        return conversion.json();
    }).then((response)=>{
        console.log(response);
    }).catch((error)=>{
        console.log(error)
    }).finally(()=>{
        console.log("The data has been succesfully sent to the API")
    })
}

Resultados

Corriendolo con GET

Corriendolo con POST

Gabriel Rodrigo Nina Vargas

student•

{ path: '/api/v1/products', timestamp: '2024-07-10T22:42:12.756Z', name: 'EntityNotFoundError', message: 'Could not find any entity of type "Category" matching: {\n "id": 1\n}'} a alguien le salio este error? :v

Juan Felipe Alvarez Rios

student•

Tengo la duda en el ID, ¿por que si cambiamos el Tiitle y el price, trae cómo ID lo que se puso en ambos campos?

Emanuel Alvarez

student•

Tengo esta duda. Por lo que vi esta es una API publica y cualquiera puede hacer posts en ella. Entonces, queda un registro de quien ha hecho cada post? Algún nombre o ip?

Juan Camilo Suarez

student•

Estamos haciendo un post a la api de forma local, creo que tiene mucha más complejidad para hacerle un cambio a la api

import fetch from 'node-fetch';
const API = 'https://api.escuelajs.co/api/v1';

function postData(urlApi, data) {
    //ya no se solicita informarción si no se guardará información
    const response = fetch(urlApi, {
        method: 'POST', //tiene que ir en mayúscula
        mode: 'cors', //cors es el permiso que va a tener, por defecto va estar siempre en cors
        credentials: 'same-origin', //es opcional
        headers:{
            'Content-Type': 'application/json' //necesario indicar que lo que se está enviando es de tipo json
        },
        body: JSON.stringify(data) //el método JSON.stringify() convierte un objeto o valor de JavaScript en una cadena de texto JSON
    });
    return response;
}

//En https://fakeapi.platzi.com/doc/products se consigue la estructura de como debe ser el objeto que se quiere crear con POST
const data = {
    "title": "Nunca pares de aprender",
    "price": 2,
    "description": "A description",
    "categoryId": 1,
    "images": ["https://placeimg.com/640/480/any"]
}

//podemos usar el postData como una promesa y con .then obtener la respuesta como un objeto json y mostrarlo después en la consola
postData(`${API}/products`, data)
    .then(response => response.json())
    .then(data => console.log(data));

//Con PUT para actualizar un objeto
function putData(urlApi, dataUpdate) {
    const response = fetch(urlApi, {
        method: 'PUT',
        mode: 'cors',
        credentials: 'same-origin',
        headers:{
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataUpdate)
    });
    return response;
}

const dataUpdate = {
    "title": "Se puede cambiar tambien otras caracteristicas",
    "price": 10 // no es necesario colocar todas las características del objeto, solo las que se cambiarán
}

putData(`${API}/products/271`, dataUpdate) //se debe colocar el id del objeto que se quiere modificar
    .then(response => response.json())
    .then(dataUpdate => console.log(dataUpdate));

//Eliminar un objeto indicando el id con DELETE
function deleteData(urlApi) { //no es necesario pasar la data
    const response = fetch(urlApi, {
        method: 'DELETE',
        mode: 'cors',
        credentials: 'same-origin',
        headers:{
            'Content-Type': 'application/json'
        } //no es necesario especificar el body
    });
    return response;
}

const idNumber = 271; //se debe colocar el id del objeto qu se quiere modificar

deleteData(`${API}/products/${idNumber}`) //no es necesario pasar data
    .then(() => {
        console.log(`Borrado ${idNumber}`); //es opcional imprimir en consola
    });

{ 
	title: "¡DIO!",
	price: 710,
	description: "Pensaste que era un producto cualquiera de la Fake Store API de Platzi, pero era yo: ¡DIO!",
	images: ["https://i.imgur.com/USxXB5a.jpg"],
	category: {
		id: 5,
		name: "Others",
		keyLoremSpace: "random",
		image: "https://api.lorem.space/image?w=640&h=480&r=407"
	},
	id: 215
}

import fetch from "node-fetch";
const API = "https://api.escuelajs.co/api/v1";

function postData(urlApi, data) {
  const response = fetch(urlApi, {
    method: "POST",
    mode: "cors",
    credentials: "same-origin",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });
  return response;
}

const data = {
  title: "New Product Course",
  price: 9999,
  description: "A description",
  categoryId: 1,
  images: ["https://placeimg.com/640/480/any"],
};

postData(`${API}/products`, data)
  .then((response) => response.json())
  .then((data) => console.log(data));

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1/products/';

function updateData(urlApi, data) {
  return fetch(
    urlApi,
    {
      method: 'PUT',
      mode: 'cors',
      credentials: 'same-origin',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data),
    },
  );
}

const dataUpdate = {
  title: 'Red shirt updated',
  price: 300
};

updateData(`${API}217`, dataUpdate)
  .then(responde => responde.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

const updateData = (urlApi, data) => {
    const response = fetch(urlApi, {
        method: 'PUT',
        mode: 'cors',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
    });
    return response;
};

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1/products/';

function deleteData(urlApi, data) {
  return fetch(
    urlApi,
    {
      method: 'DELETE',
      mode: 'cors',
      credentials: 'same-origin',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data),
    },
  );
}

deleteData(`${API}214`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

'use strict'

/* Se está utilizando fetch 2.6.11 debido a que la versión 3 no tiene compatibilidad con commonjs. Si se trata de obtener el node-fetch de la forma enseñada en el curso, hay errores debido a que también se está usando un require más abajo para poder conseguir datos desde la consola */
const fetch = require('node-fetch')
const prompt = require('prompt-sync')();

const API = 'https://api.escuelajs.co/api/v1';



//función para obtener datos
const fetchData = (urlAPI)=>{
    return fetch(urlAPI);
}

//función para enviar datos
const PostData = (urlAPI, data)=>{
    const response = fetch(urlAPI, {
        method: 'POST',
        mode: 'cors',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });

    return response;
}


//lógica
let option = prompt('Would you like to use GET or POST?');

while(option.toUpperCase() != 'GET' && option.toUpperCase() != 'POST'){
    console.log("You need to specify if we're gonna be using GET or POST");
    option = prompt('Would you like to use GET or POST?')
}

if(option.toUpperCase() === 'GET'){
    console.log("Please specify the ID of the product you'd like to get. ");
    let ID = parseInt(prompt("ID: "));
    
    while(isNaN(ID)==true || ID<0){
        console.log("You need to specify the ID of the product you'd like to see. It cannot be negative values");
        console.log("Please specify the ID of the product you'd like to get. ");
        ID = parseInt(prompt("ID: "));
    }

    fetchData(`${API}/products/${ID}`).then((response)=>{
        return response.json()
    }).then((showProduct)=>{
        console.log(showProduct)
    }).catch((error)=>{
        console.log(error)
    }).finally(()=>{
        console.log("END")
    })

}else{
    console.log("Please spicify the data of the product you'd like to send to the API.");
    let name = prompt('name: ');
    let price = prompt('price: ');
    while(isNaN(price)==true || price < 0){
        console.log("You need to set a positive numerical value as the price");
        price = prompt('price: ');
    }

    const data = {
        "title": name,
        "price": price,
        "description": "A description",
        "categoryId": 1,
        "images": ["https://placeimg.com/640/480/any"]
    };

    PostData(`${API}/products`, data).then((conversion)=>{
        return conversion.json();
    }).then((response)=>{
        console.log(response);
    }).catch((error)=>{
        console.log(error)
    }).finally(()=>{
        console.log("The data has been succesfully sent to the API")
    })
}

Fetch POST

Introducción

Lo que aprenderás en este curso

Qué es el asincronismo

Event Loop

Iniciando a programar con JavaScript

Callbacks

Configuración

Qué son los Callbacks

Playground: Ejecuta un callback con 2s de demora

XMLHTTPRequest

Fetch data

Callback hell

Promesas

Qué son las promesas

Playground: Crea una función de delay que soporte asincronismo

Fetch

Fetch POST

Async Await

Funciones asíncronas

Try and catch

Playground: Captura el error de una petición

¿Cómo enfrentar los errores?

Generadores

Generators

Proyecto CV

Proyecto del curso

Consumiendo API

Desplegando el proyecto

Playground: Crea una utilidad para hacer peticiones

Nunca pares de crear

Conclusión

¿Qué camino tomar para seguir aprendiendo?

Autoevaluación de Proyecto: Creación de Landing Page