No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Fetch POST

14/26
Recursos

Aportes 97

Preguntas 20

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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/

📂 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟮: 𝗙𝗲𝘁𝗰𝗵 𝗣𝗢𝗦𝗧 𝟭𝟮/𝟮𝟭 📂
.
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
    });

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
}
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));


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

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.

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

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.

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));

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 😄

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;
};

hare un bucle que agregue unos 1000 registros

No entiendo nada

Apunte en Notion

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));

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

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

¡Me gustó mucho esta clase! me agobié un poco al principio con tanta información pero con algo de tiempo y leer mucho fui capaz de hacer ambas cositas... Muy bien, para hacer el **UPDATE** ```js //ACTUALIZAR LOS DATOS DEL PRODUCTO const updatePost = (urlApi, data2) => { const response = fetch(urlApi, { method: 'PUT', mode: 'cors', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data2) }); return response; } const dataUpdate = { "id": 107, "title": "New cute chair UPDATED", "price": 88.99 } updatePost(`${API}/products/${dataUpdate.id}`, dataUpdate) .then(response => response.json()) .then(dataUpdate => console.log(dataUpdate)) .catch(error => console.error('Error', error)); ```//ACTUALIZAR LOS DATOS DEL PRODUCTO const updatePost = (urlApi, data2) => {    const response = fetch(urlApi, {        method: 'PUT',        mode: 'cors',        credentials: 'same-origin',        headers: {            'Content-Type': 'application/json'        },        body: JSON.stringify(data2)     });    return response;} const dataUpdate = {    "id": 107,    "title": "New cute chair UPDATED",    "price": 88.99} updatePost(`${API}/products/${dataUpdate.id}`, dataUpdate)    .then(response => response.json())    .then(dataUpdate => console.log(dataUpdate))    .catch(error => console.error('Error', error)); y para hacer el **DELETE** ```js const deleteData = (urlApi) => { const response = fetch(urlApi, { method: 'DELETE', mode: 'cors', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' } }); return response; } const deleteUpdate = { "id": 107, } deleteData(`${API}/products/${deleteUpdate.id}`) .then(response => { if (response.ok) { console.log(`Producto con ID ${id} eliminado correctamente.`); } else { console.error('Error al eliminar el producto:', response.statusText); } }) .catch(error => console.error('Error:', error)); ```const deleteData = (urlApi) => {    const response = fetch(urlApi, {        method: 'DELETE',        mode: 'cors',        credentials: 'same-origin',        headers: {            'Content-Type': 'application/json'        }    });    return response;} const deleteUpdate = {    "id": 107,} deleteData(`${API}/products/${deleteUpdate.id}`)    .then(response => {        if (response.ok) {            console.log(`Producto con ID ${id} eliminado correctamente.`);        } else {            console.error('Error al eliminar el producto:', response.statusText);        }    })    .catch(error => console.error('Error:', error));
No me gusta para nada este tipo como explica Critica constructiva

14/26 Curso de Asincronismo: Fetch POST

El método fetch en JavaScript también se utiliza para realizar solicitudes HTTP POST, que permiten enviar datos al servidor para crear o actualizar recursos. A diferencia de las solicitudes GET que se utilizan para recuperar datos, las solicitudes POST se utilizan para enviar datos al servidor. Aquí tienes un ejemplo de cómo realizar una solicitud POST utilizando fetch:

// URL del servidor donde deseas enviar la solicitud POST
const url = 'https://api.example.com/create-resource';

// Datos que deseas enviar al servidor en formato JSON
const data = {
  nombre: 'Ejemplo',
  edad: 30
};

// Configuración de la solicitud
const requestOptions = {
  method: 'POST', // Método HTTP
  headers: {
    'Content-Type': 'application/json' // Tipo de contenido del cuerpo de la solicitud
  },
  body: JSON.stringify(data) // Convierte los datos en formato JSON y los agrega al cuerpo de la solicitud
};

// Realiza la solicitud POST
fetch(url, requestOptions)
  .then(response => {
    if (!response.ok) {
      throw new Error('Error de red');
    }
    return response.json(); // Convierte la respuesta a JSON
  })
  .then(data => {
    console.log('Respuesta del servidor:', data); // Hacer algo con la respuesta del servidor
  })
  .catch(error => {
    console.error('Error:', error);
  });


En este ejemplo:

  1. Se especifica la URL del servidor al que deseas enviar la solicitud POST.
  2. Se crea un objeto requestOptions que configura la solicitud. Esto incluye el método HTTP (en este caso, ‘POST’), el tipo de contenido del cuerpo de la solicitud (JSON en este caso), y los datos que se enviarán en el cuerpo de la solicitud, que se convierten en una cadena JSON utilizando JSON.stringify.
  3. Luego, se utiliza fetch para realizar la solicitud POST al servidor. La promesa resultante se maneja de manera similar a un ejemplo anterior con GET, donde se verifica si la solicitud fue exitosa y se procesa la respuesta del servidor.


En resumen, puedes utilizar fetch en JavaScript para realizar solicitudes POST, lo que te permite enviar datos al servidor y realizar operaciones de creación o actualización en recursos remotos.


Utilizando PUT y DELETE


También puedes utilizar fetch en JavaScript para realizar solicitudes HTTP PUT y DELETE. Aquí te proporciono ejemplos de ambas:

Solicitud HTTP PUT:


La solicitud PUT se utiliza para actualizar un recurso existente en el servidor. Aquí tienes un ejemplo de cómo realizar una solicitud PUT utilizando fetch:

// URL del servidor donde deseas enviar la solicitud PUT
const url = 'https://api.example.com/update-resource/1'; // Supongamos que estás actualizando el recurso con ID 1

// Datos que deseas enviar al servidor en formato JSON para la actualización
const data = {
  nombre: 'Nuevo Nombre',
  edad: 35
};

// Configuración de la solicitud
const requestOptions = {
  method: 'PUT', // Método HTTP
  headers: {
    'Content-Type': 'application/json' // Tipo de contenido del cuerpo de la solicitud
  },
  body: JSON.stringify(data) // Convierte los datos en formato JSON y los agrega al cuerpo de la solicitud
};

// Realiza la solicitud PUT
fetch(url, requestOptions)
  .then(response => {
    if (!response.ok) {
      throw new Error('Error de red');
    }
    return response.json(); // Convierte la respuesta a JSON
  })
  .then(data => {
    console.log('Respuesta del servidor:', data); // Hacer algo con la respuesta del servidor
  })
  .catch(error => {
    console.error('Error:', error);
  });


En este ejemplo, estamos realizando una solicitud PUT para actualizar un recurso en la URL especificada. Los datos que se desean actualizar se envían en el cuerpo de la solicitud en formato JSON.

Solicitud HTTP DELETE:


La solicitud DELETE se utiliza para eliminar un recurso existente en el servidor. Aquí tienes un ejemplo de cómo realizar una solicitud DELETE utilizando fetch:

// URL del servidor donde deseas enviar la solicitud DELETE
const url = 'https://api.example.com/delete-resource/1'; // Supongamos que estás eliminando el recurso con ID 1

// Configuración de la solicitud
const requestOptions = {
  method: 'DELETE' // Método HTTP
};

// Realiza la solicitud DELETE
fetch(url, requestOptions)
  .then(response => {
    if (!response.ok) {
      throw new Error('Error de red');
    }
    console.log('Recurso eliminado con éxito'); // La respuesta no contiene contenido en una solicitud DELETE exitosa
  })
  .catch(error => {
    console.error('Error:', error);
  });


En este ejemplo, estamos realizando una solicitud DELETE para eliminar un recurso en la URL especificada. La respuesta del servidor no contiene contenido en una solicitud DELETE exitosa.

En mi caso me mostró true en la consola de VSCode al realizar un DELETE.


Estos ejemplos demuestran cómo utilizar fetch en JavaScript para realizar solicitudes PUT y DELETE, lo que te permite actualizar y eliminar recursos en un servidor web. Ten en cuenta que la implementación real en tu aplicación dependerá de la API o servicio web específico que estés utilizando.

Espero sea de utilidad. 👨‍💻

Dejo el productazo subido

{"title":"Productazo 10/10","price":69420,"description":"El mejor productos de todos los productos, con la mejor producción","images":["https://placeimg.com/640/480/any"],"category":{"id":1,"name":"Clothes","keyLoremSpace":"fashion","image":"https://api.lorem.space/image/fashion?w=640&h=480&r=9908"},"id":260}

Antes de que lo borren 🤣

Les recomiendo instalar la extensión de JSON Viewer para que puedan ver el objeto JSON de manera amigable.

Si al correr el codigo la consola imprime promise { <pending> }, fijense que luego de que no funcionara el codigo y el profesor buscase el error, el codigo de then fue cambiado.

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


// Post-data
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;
}


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


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

este es mi método put

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

async function put(url,data){
const response=await fetch(`${url}/products/1314`,{
  method:'PUT',
  mode:'cors',
  headers:{
    'Content-Type':'application/json'
  },
  body:JSON.stringify(data)
})
}

put(API,data1).then(response=>(console.log(response))).catch(error=>(console.log(error)))

First of all the complete code

import fetch from "node-fetch";

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

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

const data = {
  title: "New Jordan shoes",
  price: 120,
  description: "Michael Jordan shoes",
  categoryId: 1,
  images: ["https://placeimg.com/640/480/any"],
};

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

const updateItem = (urlApi, updateData) => {
  const response = fetch(urlApi, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(updateData),
  });
  return response;
};

const updateData = {
  title: "New Jordan Sweater",
  price: 100,
  description: "Black Jordan Sweater",
};

updateItem(`${API}/products/${268}`, updateData)
  .then((response) => response.json())
  .then((data) => console.log(updateData))
  .finally(() => console.log("Finally updated"));

const deleteItem = (urlApi, id) => {
  const response = fetch(urlApi, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(id),
  });
  return response;
};

deleteItem(`${API}/products/${266}`)
  .then((response) => response.json())
  .finally(() => console.log("Finally Deleted"));

Update method

const updateItem = (urlApi, updateData) => {
  const response = fetch(urlApi, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(updateData),
  });
  return response;
};

const updateData = {
  title: "New Jordan Sweater",
  price: 100,
  description: "Black Jordan Sweater",
};

updateItem(`${API}/products/${268}`, updateData)
  .then((response) => response.json())
  .then((data) => console.log(updateData))
  .finally(() => console.log("Finally updated"));

Delete method

const deleteItem = (urlApi, id) => {
  const response = fetch(urlApi, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(id),
  });
  return response;
};

deleteItem(`${API}/products/${266}`)
  .then((response) => response.json())
  .finally(() => console.log("Finally Deleted"));

Create method, this method was created by the teacher and we saw it in this class.

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

const data = {
  title: "New Jordan shoes",
  price: 120,
  description: "Michael Jordan shoes",
  categoryId: 1,
  images: ["https://placeimg.com/640/480/any"],
};

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

Yp tuve problemas con el Method: DELETE pero encontre esta solución

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

fetch(`${API}/products/321`, {
    method: 'DELATE',
    headers: {
        'Content-type': 'application/json'
    }
})

Despues caí en cuenta que es porque estaba usando un const
y de este modo pude solucionarlo de dos formas.

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

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

delateApi(`${API}/products/321`)
.then(response => response.JSON())
.catch(error => console.log(error))
.finally(() => console.log(`Finally`));


🍃 Este código es una implementación de una cadena de promesas que utilizan la función fetch para obtener información de una API RESTful. La idea general del código es obtener los productos de la API, obtener información detallada sobre un producto específico, y finalmente obtener información sobre la categoría del producto.

Aquí te explico el código paso a paso:

  1. Se importa el módulo fetch de la biblioteca node-fetch.

    import fetch from "node-fetch";
    
  2. Se declara una constante API que contiene la URL base de la API.

    const API = "https://api.escuelajs.co/api/v1";
    
  3. Se define una función fetchData que recibe una URL y utiliza la función fetch para obtener información de la API. La función retorna una promesa que se resuelve con la respuesta obtenida.

    function fetchData(urlAPI) {
    	return fetch(urlAPI);
    }
    
  4. Se llama a la función fetchData para obtener los productos de la API. La respuesta obtenida se transforma a formato JSON mediante el método json(), y se encadena una segunda promesa para obtener información detallada sobre el primer producto.

    fetchData(`${API}/products`)
    	.then((response) => response.json())
    	.then((products) => {
    		console.log(products);
    		return fetchData(`${API}/products/${products[0].id}`);
    	})
    
  5. Se utiliza una nueva llamada a fetchData para obtener información detallada sobre el primer producto. La respuesta obtenida se transforma a formato JSON mediante el método json(), y se encadena una tercera promesa para obtener información sobre la categoría del producto.

    	.then((response) => response.json())
    	.then((product) => {
    		console.log(product.title);
    		return fetchData(`${API}/categories/${product.category.id}`);
    	})
    
  6. Se utiliza una nueva llamada a fetchData para obtener información sobre la categoría del producto. La respuesta obtenida se transforma a formato JSON mediante el método json(), y se muestra el nombre de la categoría obtenida en la consola.

    	.then((response) => response.json())
    	.then((category) => console.log(category.name))
    
  7. Se maneja cualquier error que pueda ocurrir en la cadena de promesas mediante el método catch(), y se muestra el error en la consola.

    	.catch((err) => console.error(err))
    
  8. Se utiliza el método finally() para mostrar un mensaje en la consola al final de la ejecución de la cadena de promesas.

    	.finally(() => {
    		console.log("Finally");
    	});
    

En resumen, este código demuestra cómo utilizar la función fetch para obtener información de una API RESTful mediante promesas encadenadas. Cada promesa se encarga de obtener y transformar la información necesaria, y se manejan los posibles errores que puedan ocurrir en la cadena de promesas.

Me gusto mucho practicar con PUT y DELETE también se los recomiendo:


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

//! POST
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;
}
//* first info
const data1 = {
    "title": "Master Chief",
    "price": 117,
    "description": "The best Spartan",
    "categoryId": 1,
    "images": [
        "https://upload.wikimedia.org/wikipedia/en/4/42/Master_chief_halo_infinite.png"
    ]
}
postData(`${API}/products`, data1)
    .then(response => response.json())
    .then(data1 => console.log(data1))

//* 2nd info
const data2 = {
    "title": "Cortana",
    "price": 100,
    "description": "The best AI",
    "categoryId": 1,
    "images": [
        "https://upload.wikimedia.org/wikipedia/en/4/42/Master_chief_halo_infinite.png"
    ]
}
postData(`${API}/products`, data2)
    .then(response => response.json())
    .then(data2 => console.log(data2))

//! PUT
function putData(urlApi, data) {
    const response = fetch(urlApi, {
        method: 'PUT',
        mode: 'cors',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    return response;
}
const idData1 = 283;
const data1Put = {
    "title": "Master Chief best known as 'Demon'",
    "description": "The best Spartan of all time",
}
putData(`${API}/products/${idData1}`, data1Put)
    .then(response => response.json())
    .then(data1Put => console.log(data1Put))

//! DElETE
function deleteData(urlApi, data) {
    const response = fetch(urlApi, {
        method: 'DELETE',
        mode: 'cors',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    return response;
}
const idData2 = 285
deleteData(`${API}/products/${idData2}`)
    .then(response => response.json())
    .then(response => console.log(response))

Para eliminar varios productos con metodo for

import fetch from "node-fetch";

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

function deleteData(urlApi, productId){
    const response = fetch(`${urlApi}/${productId}`, {
        method: 'DELETE',
    })
    return response;
}


for (let i = 230; i <  241; i++) {
    deleteData(`${API}/products`, i)
    .then (response=> response.json())
    .then (data => console.log(data))
    .catch(error => console.log(error))
    
}

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": "212",
    "price": 212,
    "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));

Muy buen curso, comparado con el viejo ,al tener las practicas se vuelve mucho mas facil de entender y de paso practicas un poco ya que se vuelve un pco mas practico el curso.

muy interesante 😃
gracias…

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": "212",
    "price": 212,
    "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));
![](https://static.platzi.com/media/user_upload/image-2a7b3b26-d461-400b-9da8-71b820ce936e.jpg) Este fue el resultado de la clase de hoy.
Challenge , It is Done ! . ![](https://static.platzi.com/media/user_upload/image-a4421bf9-aa5f-4256-95b5-2a0005170a0c.jpg) La extension JSON fromatter se encuentra facil en Google Chrome Ext Stores .
\# Fetch POST Lo utilizamos para hacer un post a una API O guardar datos. \## Métodos fetch : \- 'Get': Para obtener \- 'Post': Enviar \- 'Put': Actualizar \- 'Delete' Para eliminar. Para usarlo hay que tener en cuenta \- Adónde enviar los datos: con la URL del servidor o servicio web.- Qué tipo de datos enviar: especificando el método POST.- Cuáles datos enviar: los datos en sí, como el nombre de un usuario, un comentario, o cualquier información que quieras enviar al servidor.- Cómo enviarlos: configurando detalles como el formato (por ejemplo, JSON) para que el servidor entienda la información correctamente. \## Parametros de fetch ```Javascript    fetch(url, options)``` \### Ejemplo ```Javascriptconst API = 'https://api.escuelajs.co/api/v1/products/' const postData = (urlApi, data) => {    const response = fetch(urlApi,{ /\*Hacia donde va \*/        method: 'POST',/\*Método que se va a utilizar \*/        mode: 'cors', /\*Tipo de acceso permitido \*/        credentials: 'same-origin',        headers: {            'Content-Type':'application/json' /\* que tipo de datos que se van a enviar\*/        },        body: JSON.stringify(data)    })    return response;} const data = {    "title": "Dron",    "price": 200,    "description": "Your favorite DRON",    "categoryId": 1,    "images": \["https://images.pexels.com/photos/1336185/pexels-photo-1336185.jpeg?auto=compress\&cs=tinysrgb\&w=600"]} postData(`${API}`,data)    .then((response)=> response.json())    .then(data => console.log('DATA :',data))    .catch(error => console.error('Error ', error))    .finally('Código post finalizado')``` \--- \### Options : \*\*Method :\*\* Se refiere a que clase de metodo http vamos a invocar \*\*mode :\*\* Define cómo manejar la seguridad CORS para solicitudes a otros dominios: \- 'cors': Permite acceder a datos de otros dominios si el servidor lo autoriza.- 'no-cors': Carga recursos sin datos detallados (imágenes, CSS) de otros dominios.- 'same-origin': Restringe las solicitudes al mismo dominio por seguridad. \*\*credentials :\*\* se usa para manejar cookies, cabeceras de autenticación y otros datos que identifican al usuario cuando se realiza una solicitud. Básicamente, controla si se envían o no estas "credenciales" (información de identificación) junto con la solicitud y también si el navegador puede guardar credenciales de una respuesta que recibe. \*\*headers :\*\* Se esta indicando que tipo de Mensaje se esta enviando. \*\*body :\*\* Hace referencia los datos o contenido que estoy enviando
Para la fecha 10 de noviembre del 2024 la API no esta en muy buen estado, propongo que entre todos la limpiemos y le demos mantenimiento para poderla incluir en nuestros proyectos personales.
en que casos es correcto usar comillas invertidas? acabo de notar que cuando las use al importar el modulo fetch-post me dio un error de sintaxis. por otro lado al correr mi codigo este es el resultado, se supone lo tengo igual que el de la clase. Promise { \<pending> }undefined
![](https://static.platzi.com/media/user_upload/image-34dbfa1e-1352-4b9f-a692-78dc567670ef.jpg)
* **URL y datos**: Define la URL a la cual quieres enviar la petición POST y los datos que deseas enviar al servidor. * **Opciones de la petición**: Crea un objeto `options` donde especificas el método (`method: 'POST'`), los headers (`headers`) como el tipo de contenido (`'Content-Type': 'application/json'` en este caso), y el cuerpo de la petición (`body`) que contiene los datos convertidos a formato JSON usando `JSON.stringify()`. * **Fetch**: Llama a `fetch()` con la URL y las opciones que configuraste. Esto devuelve una promesa que maneja la respuesta del servidor. * **Manejo de la respuesta**: En el primer `then`, verificamos si la respuesta fue exitosa (`response.ok`). Si es así, convertimos la respuesta a JSON usando `response.json()` para trabajar con los datos devueltos. * **Manejo de errores**: Si hay algún problema con la petición (como errores de red o respuestas de error del servidor), se manejan en el `catch`.
{ 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
Excelente clase!!
Para los que les salía este error **"ts-node" no se reconoce como un comando interno o externo,programa o archivo por lotes ejecutable.".** Investigando, vi que se soluciona instalando `npm install -g ts-node`
Hola!! Alguien sabe a que se debe el siguiente error: {  path: '/api/v1/products/',  timestamp: '2024-05-23T02:38:38.404Z',  name: 'EntityNotFoundError',  message: 'Could not find any entity of type "Category" matching: {\n    "id": 1\n}'} consultè con la API los parametros del producto, ademas de verificar el link, pero sigue apareciendo este error. Muchas gracias por sus aportes
![](https://static.platzi.com/media/user_upload/code-1-b08e689c-69f2-4b26-b74d-18a845b47be6.jpg)
ocurrió un pequeño error, este si se ve mejor :)```js // Importa la función fetch de la biblioteca node-fetch import fetch from "node-fetch"; // Define la URL base de la API const API = 'https://api.escuelajs.co/api/v1'; // Define una función para realizar una solicitud POST function postData(urlApi, data) { // Realiza una solicitud POST a la URL especificada const response = fetch(urlApi, { method: 'POST', // Método de la solicitud: POST mode: 'cors', // Modo de solicitud: cors credentials: 'same-origin', // Credenciales: misma origen headers: { 'Content-type': 'application/json' // Tipo de contenido: JSON }, body: JSON.stringify(data) // Convierte los datos a JSON y los envía en el cuerpo de la solicitud }); return response; // Retorna la respuesta de la solicitud } // Define los datos del producto a enviar en la solicitud POST const data = { "title": "New Product course", "price": 9999, "description": "A description", "categoryId": 1, "images": ["https://placeimg.com/640/480/any"] }; // Realiza una solicitud POST utilizando la función postData postData(`${API}/products`, data) // Maneja la respuesta de la solicitud .then(response => response.json()) // Convierte la respuesta a JSON .then(data => console.log(data)) // Imprime los datos de la respuesta en la consola .catch(error => console.log(error)); // Maneja cualquier error que ocurra durante la solicitud ```
explicación del codigo:```js // Importa la función fetch de la biblioteca node-fetch import fetch from "node-fetch"; // Define la URL base de la API const API = 'https://api.escuelajs.co/api/v1'; // Define una función para realizar una solicitud POST function postData(urlApi, data) { // Realiza una solicitud POST a la URL especificada const response = fetch(urlApi, { method: 'POST', // Método de la solicitud: POST mode: 'cors', // Modo de solicitud: cors credentials: 'same-origin', // Credenciales: misma origen headers: { 'Content-type': 'application/json' // Tipo de contenido: JSON }, body: JSON.stringify(data) // Convierte los datos a JSON y los envía en el cuerpo de la solicitud }); return response; // Retorna la respuesta de la solicitud } // Define los datos del producto a enviar en la solicitud POST const data = { "title": "New Product course", "price": 9999, "description": "A description", "categoryId": 1, "images": ["https://placeimg.com/640/480/any"] }; // Realiza una solicitud POST utilizando la función postData postData(`${API}/products`, data) // Maneja la respuesta de la solicitud .then(response => response.json()) // Convierte la respuesta a JSON .then(data => console.log(data)) // Imprime los datos de la respuesta en la consola .catch(error => console.log(error)); // Maneja cualquier error que ocurra durante la solicitud ```// Importa la función fetch de la biblioteca node-fetch import fetch from "node-fetch"; // Define la URL base de la API const API = 'https://api.escuelajs.co/api/v1'; // Define una función para realizar una solicitud POST function postData(urlApi, data) { // Realiza una solicitud POST a la URL especificada const response = fetch(urlApi, { method: 'POST', // Método de la solicitud: POST mode: 'cors', // Modo de solicitud: cors credentials: 'same-origin', // Credenciales: misma origen headers: { 'Content-type': 'application/json' // Tipo de contenido: JSON }, body: JSON.stringify(data) // Convierte los datos a JSON y los envía en el cuerpo de la solicitud }); return response; // Retorna la respuesta de la solicitud } // Define los datos del producto a enviar en la solicitud POST const data = { "title": "New Product course", "price": 9999, "description": "A description", "categoryId": 1, "images": \["https://placeimg.com/640/480/any"] }; // Realiza una solicitud POST utilizando la función postData postData(`${API}/products`, data) // Maneja la respuesta de la solicitud .then(response => response.json()) // Convierte la respuesta a JSON .then(data => console.log(data)) // Imprime los datos de la respuesta en la consola .catch(error => console.log(error)); // Maneja cualquier error que ocurra durante la solicitud

POST utilizando la Fetch API en JavaScript:

method (método): Esta propiedad define el tipo de solicitud HTTP que deseas realizar. En el caso de POST, debes establecer esta propiedad como “POST”.

body (cuerpo): Aquí especificas los datos que deseas enviar al servidor. Puedes proporcionar diferentes tipos de datos, como un objeto JSON, un formulario codificado o incluso un archivo binario. En el ejemplo que te mostré previamente, usamos JSON.stringify() para convertir un objeto en formato JSON y enviarlo como el cuerpo de la solicitud.

headers (cabeceras): Las cabeceras permiten configurar información adicional sobre la solicitud. En el caso de POST, es común establecer el tipo de contenido que se está enviando. En el ejemplo, hemos definido “Content-Type” como “application/json” para indicar que estamos enviando datos en formato JSON.

credentials (credenciales): Esta propiedad controla si se deben enviar o recibir cookies junto con la solicitud. Por defecto, Fetch no envía ni recibe cookies. Si necesitas mantener una sesión de usuario (por ejemplo, para autenticación), debes configurar esta propiedad como “include”.

mode (modo): Define el modo de la solicitud. Los valores comunes son “cors” (para solicitudes entre dominios) y “same-origin” (para solicitudes dentro del mismo origen).

cache (caché): Controla cómo se almacena en caché la respuesta. Puedes establecerlo como “no-cache” para evitar el almacenamiento en caché.

redirect (redirección): Define cómo manejar las redirecciones. Puedes configurarlo como “follow” para seguir automáticamente las redirecciones.

referrer (referente): Especifica el valor del encabezado Referer en la solicitud.
Puedes establecerlo como “no-referrer” para no enviar el referente.

integrity (integridad): Permite verificar la integridad de los recursos descargados. Puedes proporcionar un hash para asegurarte de que el recurso no se haya modificado.

signal (señal): Permite abortar la solicitud antes de que se complete. Puedes usarlo para cancelar la solicitud si es necesario.

```js import fetch from 'node-fetch'; // Importa la función fetch desde el módulo 'node-fetch' const API = 'https://api.escuelajs.co/api/v1'; // Define una constante llamada API que contiene la URL base de la API function postData(urlApi, data) { // Define una función llamada postData que toma una URL y un objeto de datos como argumentos const response = fetch(urlApi, { // Realiza una solicitud fetch a la URL proporcionada con la configuración especificada method: 'POST', // Especifica que esta es una solicitud POST mode: 'cors', // Establece el modo de CORS (Cross-Origin Resource Sharing) para permitir solicitudes entre dominios credentials: 'same-origin', // Indica que las credenciales deben ser enviadas si la solicitud y la respuesta están en el mismo origen headers: { // Configura los encabezados de la solicitud 'Content-Type': 'application/json' // Establece el tipo de contenido del cuerpo de la solicitud como JSON }, body: JSON.stringify(data) // Convierte el objeto de datos a formato JSON y lo establece como el cuerpo de la solicitud }); return response; // Retorna la respuesta de la solicitud fetch } const data = { // Define un objeto de datos que se enviará en la solicitud POST "title": "212", // Título del producto "price": 212, // Precio del producto "description": "A description", // Descripción del producto "categoryId": 1, // ID de la categoría del producto "images": [ // Array de imágenes del producto "https://placeimg.com/640/480/any" // URL de la imagen del producto ] } postData(`${API}/products`, data) // Llama a la función postData con la URL de productos y los datos del producto como argumentos .then(response => response.json()) // Convierte la respuesta a formato JSON .then(data => console.log(data)); // Ejecuta esta función cuando la respuesta se convierte en JSON, pasando los datos como argumento y los imprime en la consola ```

reto los tres metodos “POST, PUT, DELETE”

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


function post_data(url_api, data){
    const info = fetch(url_api, {
        method: 'POST',
        mode: 'cors',
        credentials: 'same-origin',
        headers:{
            'content-type':'application/json'
        },
        body: JSON.stringify(data)
    })

    return info
}

const product = {
    "title": "Tshirt, pipe",
    "price": 400,
    "description": "Black oversized t-shirt",
    "categoryId": 1,
    "images": ["https://placeimg.com/640/480/any"]
  }


  post_data(`${APi}/products`, product)
            .then((response) => {
                return response.json()
            })
            .then((data) => {
                console.log(data)
            })
            .catch((err) => {
                console.log(err)
            })
            .finally(() => {
                console.log('connection close')
            })


function put_data(url_api, update_data) {
    const response = fetch(url_api, {
        method:'PUT',
        mode: 'cors',
        credentials: 'same-origin',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(update_data)
    })

    return response
}

const id_product = 169
const data_to_update = {
    "title" : "very cute black diver",
    "description" : "good",
    "price" : 500
}

put_data(`${APi}/products/${id_product}`, data_to_update)
        .then((response) => {
            return response.json()
        })
        .then((data) => {
            console.log(data)
        })
        .catch((err) => {
            console.log(err)
        })
        .finally(() => {
            console.log('connection close')
        })


function delete_data(url_api) {
    const response = fetch(url_api, {
        method:'DELETE',
        mode: 'cors',
        credentials: 'same-origin',
        headers: {
            'content-type': 'application/json'
        },
    })
    
    return response
}

const id_to_delete = 169

delete_data(`${APi}/products/${id_to_delete}`)
            .then((response) => {
                return response.json()
            })
            .then((data) => {
                console.log(data)
            })
            .catch((err) => {
                console.log(err)
            })
            .finally(() => {
                console.log('connection close')
            })```

Problemas de CORS

Puedes tener con un problema trivial al querer realizar consultas a un backend. Mejor dicho… vas a tener este problema.

CORS es un pequeño problema con el que te toparás mil veces en tu vida como programador. Pero no te preocupes, es de fácil resolución.

La consola de desarrollo de los navegadores te permitirá obtener más información cuando las cosas no funcionen.

Indica un problema de CORS que significa, por sus siglas en español, Intercambio de Recursos de Origen Cruzado. Es una medida de seguridad de los backend para que no cualquier cliente, o cualquier front-end, realice consultas al mismo.

El backend debe permitir explícitamente que un cliente haga consultas, de lo contrario rechazará las mismas.

Habilita CORS instalando su respectiva dependencia con npm install cors y realizando la importación de la misma.

// Importamos CORS
const cors = require('cors');

// Activamos CORS
app.use(cors());

De esta forma, el backend está listo para recibir consultas y el front-end podrá obtener los datos y trabajar con los mismos.

los recursos no aparecen

hermosa clase

por las dudas si tuvieron un error como yo lo tuve, en tanto que no dejaba ejecutarlo (warning: to load an es module, set “type”: “module” in the package.json or use the .mjs extension.)
lo solucione poniendo un type :“module” en el package.json abajo de el main .
{“main”: “index.js”,
“type”: “module”,}

🔥 Verbos HTTP

Se utilizan para realizar operaciones CRUD (crear, leer, actualizar y eliminar) en recursos de una API (interfaz de programación de aplicaciones).

POST: Enviar data

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

function postData(urlApi, data) {
	const response = fetch(urlApi, {
		method: 'POST',
		// compartición de rec. / dif. origenes
		mode: 'cors', 
		credentials: 'same-origins',
		headers: {
			'Content-type': 'application/json'
		},
		body: JSON.stringify(data)
	});
	return response;
}

const data = {
	"title": "New Product Ghost 06",
	"price": 111,
	"description": "Ghost is a dead human",
	"categoryId": 3,
	"images": ["https://placeimg.com/640/480/any"]
}

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

PUT: Actualizar data

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

function putData(urlApi, updateData) {
	const response = fetch(urlApi, {
		method: 'PUT',
		mode: 'cors',
		credentials: 'same-origin',
		headers: {
			'content-type': 'application/json'
		},
		body: JSON.stringify(updateData)
	});

	return response;
}

const updateData = {
	"title": "GHOST IS DEAD...",
	"price": 222
}

const id = 276

putData(`${API}/products/${id}`, updateData)
	/* .then(response => response.json())
	.then(data => console.log(data))
	.catch(err => console.log(err)) */
	.finally(() => console.log('The update is finished'));

GET: Traer data

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

function getData(urlApi) {
	return fetch(urlApi);
}

getData(`${API}/products`)
	.then(response => response.json())
	.then(data => console.log(data[-1]))
	.catch(err => console.log(err))

DELETE: Eliminar data

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

function deleteData(urlApi) {
	const response = fetch(urlApi, {
		method: 'DELETE',
		headers: {
			'content-type': 'application/json'
		}
	});

	return response;
}

const id = 277;

deleteData(`${API}/products/${id}`)
	.then(() => console.log(`Se elimino: id ${id}`))
	.catch((err) => console.log(err));

✨ Mas apuntes/notas/resumenes en este enlace 👈👀

Código de la clase:

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",
  "price": 10,
  "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))

Excelentes.Buena explicacion,Buen maestro

Me gusto demasiado estar subiendo, actualizando y borrando jajajaja

14/26 Fecth POST
Es una función que te permite enviar datos a un servidor a través de internet. Puedes utilizarla para enviar información, como enviar un formulario en línea con datos de usuario.

fetch('https://api.example.com/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'John', age: 30 }),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Hacer algo con la respuesta del servidor
  })
  .catch(error => {
    console.error('Error:', error);
    // Manejar el error
  });

Utilizamos fetch POST para enviar datos a la URL que representa un endpont de una API donde se pueden crear usuarios.

Pasamos un objeto como segundo parámetro a fetch que incluye el método POST para indicar que queremos enviar datos. También especificamos el cuerpo de la solicitud body que contiene los datos del usuario en formato JSON utilizando JSON.stringify(). Además, establecemos el encabezado headers para indicar que el tipo de contenidos es JSON

Luego encadenamos los método .then() para manejar la respuesta del servidor. El método .json() convierte la respuesta en un objeto JavaScript legible y luego podemos acceder a los datos en el bloque de código dentro del segundo .then() En este caso, simplemente los imprimimos en la consola.

Si ocurre algún erros durante la solicitud, utilizamos el método .catch() para manejarlo y mostrar un mensaje de error en la consola.

Interesante, es más fácil fetch que con XMLHttppRequest

Dejo mi código para POST, PUT y DELETE

import fetch from "node-fetch";

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

//CREATE PRODUCT

function postData(urlApi,data){
    const response=fetch(urlApi,
    {   //recibe un segundo parámetro que especifica la configuración necesaria para enviar un dato
        method:'POST',
        mode:'cors', //indica que se permiten ciertas solicitudes predeterminadas de origen cruzado (peticiones entre dominios diferentes) como GET y POST para salvaguardar y evitar manipulaciones maliciosas.
        credentials:'same-origin', //same-origin indica que no hay alguna contraseña que evite usar la api
        headers:{'Content-Type':'application/json'}, //el tipo de valor que se envía, en este caso un JSON
        body:JSON.stringify(data) //información que se va a enviar, en este caso en forma de texto
    });
    return response;
}

const newData={
    "title":"0499",
    "price":499,
    "description":"Exodia Yugioh Cards",
    "categoryId":4,
    "images":["https://m.media-amazon.com/images/I/61j+1pWJZPL._AC_UF894,1000_QL80_.jpg"]
}

postData(`${API}/products`,newData);

//UPDATE PRODUCT

function updateData(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 newDataUpdate={
    "title": "EXODIA",
    "price": 1000 //se nececita para este caso estas propiedades
}

const idProductUpdate = 319;

updateData(`${API}/products/${idProductUpdate}`,newDataUpdate);

//DELETE PRODUCT

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

const idProduct = 318;

deleteData(`${API}/products/${idProduct}`);

  1. Importación del módulo ‘node-fetch’: Este módulo permite realizar solicitudes HTTP utilizando la función ‘fetch’ que es similar a la disponible en los navegadores web.
javascriptCopy code
import fetch from "node-fetch";

  1. Definición de la URL base de la API: Se define una constante ‘API’ que contiene la URL base de la API con la que se interactuará.
javascriptCopy code
const API = "https://api.escuelajs.co/api/v1";

  1. Creación de la función ‘postData’: Esta función recibe dos argumentos: ‘urlApi’, que es la URL completa de un recurso de la API, y ‘data’, que es un objeto con los datos que se enviarán a través de la solicitud POST.
javascriptCopy code
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;
}

Dentro de la función ‘postData’, se utiliza la función ‘fetch’ para realizar la solicitud POST con las siguientes opciones:

  • method: ‘POST’ indica que se realizará una solicitud POST.
  • mode: ‘cors’ permite realizar solicitudes a otros dominios.
  • credentials: ‘same-origin’ indica que solo se deben enviar las credenciales si la URL es del mismo origen que el sitio que realiza la solicitud.
  • headers: Se define el encabezado ‘Content-Type’ como ‘application/json’ para indicar que se envía un objeto JSON.
  • body: Se convierte el objeto ‘data’ en una cadena JSON utilizando JSON.stringify().
  1. Definición del objeto ‘data’: Se crea un objeto que contiene la información que se enviará a través de la solicitud POST.
javascriptCopy code
const data = {
    title: "1978",
    price: 1978,
    description: "A description",
    categoryId: 1,
    images: ["https://placeimg.com/640/480/any"],
};

  1. Uso de la función ‘postData’: Se llama a la función ‘postData’ y se le pasa como argumento la URL del recurso de la API (en este caso, ‘/products’) y el objeto ‘data’. Se encadena la función ‘then’ para manejar la respuesta del servidor y convertirla a JSON, y luego se imprime la respuesta en la consola.
javascriptCopy code
postData(`${API}/products`, data)
    .then(response => response.json())
    .then(data => console.log(data))

Les dejo otra forma un poco mas facil de leer el uso del fetch, tengar en cuenta que el fetch en si es una promesa, por lo cual se puede simplifcar bastante.
Ejemplos con POST, PUT, DELETE

const informacion = {
        "title": "High heels Mod",
        "price": 100,
        "description": "Tacones",
        "categoryId": 1,
        "images": ["https://www.pexels.com/es-es/foto/zapatos-rojos-3076787/"]
    };

const opciones = {
        method: 'POST',
        mode: 'cors',
        credentials: 'same-origin',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(informacion)
    };

fetch('https://api.escuelajs.co/api/v1/products', opciones)
    .then((respuesta) => respuesta.json())
    .then((datos) => console.log(datos))
    .catch((error) => console.error(error));


    //-----Example with PUT para actualizar se debe saber el ID ---------

    const informacionUpdate = {
        "title": "High heels - Mod",
        "price": 1000,
        "description": "Tacones - Mod",
        "categoryId": 1,
        "images": ["https://www.pexels.com/es-es/foto/zapatos-rojos-3076787/"]
    };

const opcionesUpdate = {
        method: 'PUT',
        mode: 'cors',
        credentials: 'same-origin',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(informacionUpdate)
    };

//se debe colocar el id del objeto que se quiere modificar
fetch('https://api.escuelajs.co/api/v1/products/235', opcionesUpdate)
    .then((respuesta) => respuesta.json())
    .then((datosUpdate) => console.log(datosUpdate))
    .catch((error) => console.error(error));

//---Example how to Delete, se debe indicar el id ---

const opcionesDelete = {
    method: 'DELETE',
    mode: 'cors',
    credentials: 'same-origin',
    headers: {'Content-Type': 'application/json'},
    //no es necesario pasar la informacion
};
//se debe colocar el id
fetch('https://api.escuelajs.co/api/v1/products/235', opcionesDelete)
.then((respuesta) => respuesta.json())
.then((datos) => console.log(datos))
.catch((error) => console.error(error));

Que buen curso. Ya habia hecho antes un curso de asincronismo. Pero ahora que volvieron a hacer el curso. Ahora esta increible

genial!

El link de la api cambio así que la dejare por aquí si es que no la recordaban https://fakeapi.platzi.com/en/rest/products

Wow! por eso los datos de los productos eran tan raros o no coincidían, eran datos random enviados por los estudiantes de este curso!!!

Ahí dejo como quedaría el delete, put, get, post
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;
}

function getData(urlApi){
return fetch(urlApi);
}

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

function deleteData(urlApi){
const response = fetch(urlApi, {
method: ‘DELETE’,
});
return response;
}

const dataPut ={
“title”: “Change title”,
“price”: 100
}
const data = {
“title”: “New Product Course”,
“price”: 999,
“description”: “A description”,
“categoryId”: 1,
“images”: [
https://placeimg.com/640/480/any
]
}

putData(${API}/products/201,dataPut)
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.log(err));

getData(${API}/products/201)
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.log(err));

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

deleteData(${API}/products/201)
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.log(err));

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/

Una curiosidad, los nombres random de los productos del API son a propósito o los hacen con algún generador xD

Esta increible el curso de Asincronismo con JavaScript… Muchas gracias Platzi! 🎉🎊🎉

Para “evitar” los typos , les recomendaría Tabnine, que además rellena los campos con IA, ayuda mucho cuando eres nuevo o no tan experimentado en estos temas.

Hola comparto mi solución para eliminar y actualizar datos:

Update data:

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

// Cambia el valor de productId por el producto que desees modificar
let productId = 235

const newData = {
  title: 'Macbook Pro M2',
  price: 1999,
  description: 'Computer product example'
}
putData(`${API}/products/${productId}`, newData)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err))
  .finally(() => console.log('Finally'))

Delete data:

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

let productId = 235

deleteData(`${API}/products/${productId}`)
  .then((response) => response.json())
  .catch((err) => console.log(err))
  .finally(() => console.log('Finally'))
 

alguien esta haciendo el curso ahora
por que me ha dado el 311 y el 313 o sea que alguien
hizo el 312

Se me complico un poco la explicación del profe pero de mucho buscar en youtube, encontre un video muy bueno
https://www.youtube.com/watch?v=ksg6SDwllDs

Excelente, me ha ido muy bien. Aprendiendo 1000% 😄

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

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

const data = {
  "title": "New Product practice course",
  "price": 999,
  "description": "A description new",
  "categoryId": 1,
  "images": ["https://placeimg.com/640/480/any"]
}

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

Les dejo mi metodo de edición de registro

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

const dataUpdate = {
    "title": "Curso 12 - Editado",
    "price": 270,
    "description": "Cambio de descripcion",
    "categoryId": 3,
    "images": ["https://placeimg.com/640/480/any"]
}

putData(`${API}/products/270`, dataUpdate)
    .then(response => response.json())
    .then(dataUpdate => console.log(dataUpdate))
    .catch(error => console.log('Error', error))
    .finally(() => console.log('Finally'));

Los retos han estado bastante bien, con ellos he logrado comprender mucho mejor la teoría.

Me dio curiosidad hacer el ejercicio de hacer
POST -> PUT -> DELETE


import fetch from "node-fetch";

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

const baseParamsWrite = {
    mode: 'cors',
    credentials: "same-origin",
    headers: {
        'Content-type': 'application/json'
    },
}

function postData(urlAPI, data) {
    /**
     *  {
     *    "title": "New Product",
     *    "price": 10,
     *    "description": "A description",
     *    "categoryId": 1,
     *    "images": ["https://placeimg.com/640/480/any"]
     *  }
     */
    if (!urlAPI || !data) return null;
    console.log(`\npostData [POST] ${urlAPI}:\n`, data);

    const response = fetch(urlAPI, {
        ...baseParamsWrite,
        method: 'POST',
        body: JSON.stringify(data),
    }).then(resp => resp.json());
    return response;
}
function fetchData(urlAPI, objId=null) {
    if (!urlAPI) return null;
    const url = !objId ? urlAPI : urlAPI + `/${objId}`;
    console.log(`\nfetchData [GET] ${url}`);

    const response = fetch(url).then(resp => resp.json());
    return response;
}
function putData(urlAPI, objId, data) {
    /**
     *  {
     *    "title": "Change title",
     *    "price": 100
     *  }
     */
    if (!urlAPI || !objId || !data) return null;
    const url = urlAPI + `/${objId}`;
    console.log(`\nputData [PUT] ${url}:\n`, data);

    const response = fetch(
        url,
        {
            ...baseParamsWrite,
            method: 'PUT',
            body: JSON.stringify(data),
        }
    ).then(resp => resp.json());
    return response;
}
function deleteData(urlAPI, objId) {
    if (!urlAPI || !objId) return null;
    const url = urlAPI + `/${objId}`;
    console.log(`\ndeleteData [DELETE] ${url}`);

    const response = fetch(
        url,
        {
            ...baseParamsWrite,
            method: 'DELETE'
        }
    ).then(resp => resp.json());
    return response;
}

// for fun!!
// post -> get(resp.id) -> put(resp.id) -> get(resp.id) -> delete(resp.id) -> finally(console.log)

const dataToPost = {
    "title": "New Product #2 by SdCRR",
    "price": 100,
    "description": "New Product #2 by SdCRR: You need this!",
    "categoryId": 1,
    "images": ["https://placeimg.com/640/480/any"]
}

const dataToPut = {
    "title": "Product #2 by SdCRR",
    "price": 110,
}

postData(`${API}/products`, dataToPost)
    .then(product => {
        console.log(`POST - OK!!`, product);
        return fetchData(`${API}/products\n`, product.id);
    })
    .then(product => {
        console.log(`GET Id[${product.id}]- OK!!\n`, product);
        return putData(`${API}/products`, product.id, dataToPut);
    })
    .then(product => {
        console.log(`PUT Id[${product.id}] - OK!!\n`, product);
        return fetchData(`${API}/products`, product.id);
    })
    .then(product => {
        console.log(`GET Id[${product.id}]- OK!!\n`, product);
        return deleteData(`${API}/products`, product.id);
    })
    .then(resp => console.log(`DELETE - OK!!\n`, resp))
    .catch(error => console.error(error))
    .finally(() => console.log('\nPromise - Challenge API - done!!'))

Tuve un baile bonito con el ‘type’: ‘module’ para poder user el import fetch en el challenge promise

**El error persistia y en mi caso la solucion llego con node y la version que se ejecutaba
**
En mi computador tenia las versiones de node 12 y 14

  • Para challenge callback usaba la 12 (por el ‘require’)
  • Para challenge promise usaba la 14 (por el import)

Ejemplos de editar y eliminar con intervalos de tiempo y tomando el ID del producto creado

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 Davis182",
    "price": 1000,
    "description": "Product for testing",
    "categoryId": 1,
    "images": ["https://placeimg.com/640/480/any"]
  }
//Challenge updating and deleting
 function editProduct (urlApi, editedData){
    return fetch(urlApi, {
        method: 'PUT',
        mode: 'cors',
        credentials: 'same-origin',
        headers:{
            'Content-Type' : 'application/json',
        },
        body: JSON.stringify(editedData)
    });
};
//Delete method
function deleteProduct (urlApi,productID){
    return fetch(`${urlApi}/products/${productID}`, {
        method: 'DELETE',
        mode: 'cors',
        credentials: 'same-origin',
        headers:{
            'Content-Type' : 'application/json',
        },
    });
};

//info to edit
let productID;

const data2 = {
    "title": "Davis182",
    "price": 1100,
}
postDAta(`${API}/products`, data)
  .then(response => response.json())
  .then(data => {
      console.log(data); //takes the data that has been already changed to json
      productID = data.id;
      console.log(`My current product ID is ${productID}`)
  }); 
setTimeout( () =>
    editProduct(`${API}/products/${productID}`, data2)
    .then(response => response.json())
    .then(console.log(data2))
    ,10000);

setTimeout( () =>
    deleteProduct(API,productID),
    10000);

 

Les recomiendo la extesion para google chrome “json viewer” que les permitira ver data en formato json en e navegador de manera optima.

Las clases han estado muy buenas. Ahora que veo el nuevo curso, me doy cuenta que lo que necesitaba era refrescar los conocimientos después de un tiempo para aprenderlos mejor. La primera vez estaba furioso porque no entendía nada.
Gracias profe Oscar

para que puedan ver mejor el formato json en el navegador, en este caso google chrome, debería descargar la extensión :
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=es
el cual muestra la información de esta manera

Les recomiendo la extensión para Chrome JSON Viewer la cual les va permitir ver mejor los JSON

Como curiosidad el profesor al realizar su petición creó el producto 212.
Al momento de colocar este comentario existen 291 productos, mismos que han sido creados por los estudiantes.
Pd: Échenle un ojo al producto 291 😊

En el minuto 13 con 26 segundos el profesor hace un petición GET la cual no está muy chula, nosotros podemos hacer más chula con una extensión de google (en caso de que usen ese navegador), la extensión se llama:

JSON VIEW

En el minuto 13 con 26 segundos el profesor hace un petición GET la cual no está muy chula, nosotros podemos hacer más chula con una extensión de google (en caso de que usen ese navegador), la extensión se llama: [JSON VIEW](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) ![viewJson.png](https://static.platzi.com/media/user_upload/viewJson-2e1ebc1f-23f1-475c-85d8-c924c2441278.jpg)

aca mas sobre fetch cuando vamos a hacer post https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch es importante conocer otros parametros como cache, mode y redirect

El que entienda la referencia ❤️

{"title":"Old Brown Shoe","price":63.6,"description":"I'm so glad you came here it won't be the same now when I'm with you","images":["https://c.pxhere.com/photos/f4/b7/shoe_leather_shoe_age_shoe_brown_worn_used_old_antique-1081448.jpg!d"],"category":{"id":4,"name":"Shoes","keyLoremSpace":"shoes","image":"https://api.lorem.space/image/shoes?w=640&h=480&r=8796"},"id":227}
import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1';

function postData(urlApi, data) { //postData es para agregar un producto a la API
    const response = fetch(urlApi, {
        method: 'POST', //método POST agrega, GET consulta, DELETE borra, importante estar en mayúsculas
        mode: 'cors', //valor por defecto
        credentials: 'sem-origin', //credenciales por defecto
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data) //convierte el objeto json en un string
    });
    return response;
}

const data = { //esta estructura se obtiene de la documentación del API, es el producto que agregaremos
        "title": "Chile patuano",
        "price": 69,
        "description": "El mejor chile es el que te embona",
        "categoryId": 1,
        "images": ["https://placeimg.com/640/480/any"]
}

postData(`${API}/products`, data)
    .then(response => response.json())
    .then(data => console.log(data));
//esta parte final es simplemente para obtener un console.log que nos muestre el producto que agregamos

¿Cual es el tema que usa Oscar en VS Code? alguien sabe

Comparto mi codigo
Creando producto id #274
https://api.escuelajs.co/api/v1/products/274

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

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;
}

const data = {
    "title": "PlatziCar Model S ",
    "price": 59000,
    "description": "Autonomus Electric Car made by Platzi, 499km/h, 1000km range, full charging in 5 minutes",
    "categoryId": 5,
    "images": ["https://media.wired.com/photos/629ff1ed853b24d07fae362d/3:2/w_1280%2Cc_limit/JiDU-ROBO-1-Baidu-First-Car-Business.jpg"]
  }

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

Por alguna razon al final como el lo tiene no me funcionó, tuve que poner () en response y data de los then

import fetch from "node-fetch";
//Vamos a usar fetch
const API = "https://api.escuelajs.co/api/v1";
//Esta es una fake api de platzi

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;
  }
//Funcion que se encarga de 
//utilizar fetch y transformarlo a el llamado
//del metodo post

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

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

//Podemos usar post data como
//una promesa para poder usar el <<then>>
//donde transformamos la respuesta en un
//objeto json y despues poder mostrarlo en consola