No tienes acceso a esta clase

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

Fetch POST

14/26
Recursos

Aportes 88

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

hare un bucle que agregue unos 1000 registros

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茅 鈥楶OST鈥 por 鈥楶UT鈥):

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

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

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, 鈥楶OST鈥), 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 馃ぃ

No me gusta para nada este tipo como explica Critica constructiva

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));
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 鈥淧OST鈥.

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 鈥淐ontent-Type鈥 como 鈥渁pplication/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 鈥渋nclude鈥.

mode (modo): Define el modo de la solicitud. Los valores comunes son 鈥渃ors鈥 (para solicitudes entre dominios) y 鈥渟ame-origin鈥 (para solicitudes dentro del mismo origen).

cache (cach茅): Controla c贸mo se almacena en cach茅 la respuesta. Puedes establecerlo como 鈥渘o-cache鈥 para evitar el almacenamiento en cach茅.

redirect (redirecci贸n): Define c贸mo manejar las redirecciones. Puedes configurarlo como 鈥渇ollow鈥 para seguir autom谩ticamente las redirecciones.

referrer (referente): Especifica el valor del encabezado Referer en la solicitud.
Puedes establecerlo como 鈥渘o-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 鈥淧OST, 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 鈥渢ype鈥: 鈥渕odule鈥 in the package.json or use the .mjs extension.)
lo solucione poniendo un type :鈥渕odule鈥 en el package.json abajo de el main .
{鈥渕ain鈥: 鈥渋ndex.js鈥,
鈥渢ype鈥: 鈥渕odule鈥,}

馃敟 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 鈥榥ode-fetch鈥: Este m贸dulo permite realizar solicitudes HTTP utilizando la funci贸n 鈥榝etch鈥 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 鈥楢PI鈥 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 鈥榩ostData鈥: Esta funci贸n recibe dos argumentos: 鈥榰rlApi鈥, que es la URL completa de un recurso de la API, y 鈥榙ata鈥, 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 鈥榩ostData鈥, se utiliza la funci贸n 鈥榝etch鈥 para realizar la solicitud POST con las siguientes opciones:

  • method: 鈥楶OST鈥 indica que se realizar谩 una solicitud POST.
  • mode: 鈥榗ors鈥 permite realizar solicitudes a otros dominios.
  • credentials: 鈥榮ame-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 鈥楥ontent-Type鈥 como 鈥榓pplication/json鈥 para indicar que se env铆a un objeto JSON.
  • body: Se convierte el objeto 鈥榙ata鈥 en una cadena JSON utilizando JSON.stringify().
  1. Definici贸n del objeto 鈥榙ata鈥: 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 鈥榩ostData鈥: Se llama a la funci贸n 鈥榩ostData鈥 y se le pasa como argumento la URL del recurso de la API (en este caso, 鈥/products鈥) y el objeto 鈥榙ata鈥. Se encadena la funci贸n 鈥榯hen鈥 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 鈥渘ode-fetch鈥;
const API = 鈥https://api.escuelajs.co/api/v1鈥;

function postData(urlApi, data){
const response = fetch(urlApi, {
method: 鈥楶OST鈥,
mode: 鈥榗ors鈥,
credentials: 鈥榮ame-origin鈥,
headers: {
鈥楥ontent-Type鈥: 鈥榓pplication/json鈥
},
body: JSON.stringify(data)
});
return response;
}

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

function putData(urlApi, data){
const response = fetch(urlApi, {
method: 鈥楶UT鈥,
mode: 鈥榗ors鈥,
credentials: 鈥榮ame-origin鈥,
headers: {
鈥楥ontent-Type鈥: 鈥榓pplication/json鈥
},
body: JSON.stringify(data)
});
return response;
}

function deleteData(urlApi){
const response = fetch(urlApi, {
method: 鈥楧ELETE鈥,
});
return response;
}

const dataPut ={
鈥渢itle鈥: 鈥淐hange title鈥,
鈥減rice鈥: 100
}
const data = {
鈥渢itle鈥: 鈥淣ew Product Course鈥,
鈥減rice鈥: 999,
鈥渄escription鈥: 鈥淎 description鈥,
鈥渃ategoryId鈥: 1,
鈥渋mages鈥: [
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 鈥渆vitar鈥 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 鈥榯ype鈥: 鈥榤odule鈥 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 鈥榬equire鈥)
  • 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 鈥渏son 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