Cómo enviar solicitudes POST de Fetch con JavaScript

"Peticiones POST Fetch" tiene dos términos que a menudo se escuchan al hablar sobre desarrollo web. Comúnmente utilizados en escenarios para crear nuevos registros o datos en el servidor, son esenciales para que los sistemas o aplicaciones se comuniquen entre sí. A pesar de lo complicado que pueda sonar, ¡este artículo diseccionará las peticiones POST Fetch para ti!

💡

Apidog es una plataforma de desarrollo de API centrada en el diseño que simplifica la creación y construcción de peticiones POST. Su interfaz de usuario intuitiva facilita a principiantes y expertos por igual el diseño y el lanzamiento de API de manera eficiente. Experimenta el poder de Apidog hoy mismo. Pruébalo ahora 👇 👇

button

¿Qué es la API Fetch?

La API Fetch es una interfaz JavaScript moderna proporcionada por los navegadores web para realizar peticiones HTTP y gestionar respuestas. Es un reemplazo más flexible y potente para la antigua API XMLHttpRequest, que se utilizaba tradicionalmente para realizar peticiones asíncronas en JavaScript.

Si bien la API Fetch puede gestionar diferentes tipos de peticiones HTTP, incluyendo GET, POST, PUT, DELETE, etc., es particularmente útil para realizar peticiones POST, que se utilizan comúnmente para enviar datos a un servidor.

Al realizar una petición POST utilizando la API Fetch, puedes incluir el cuerpo de la petición, que contiene los datos que deseas enviar al servidor. El cuerpo puede estar en varios formatos, como JSON, FormData o texto plano.

¿Cómo enviar peticiones POST Fetch con JavaScript?

Paso 1: Configuración de la petición

Especifica la URL del punto final del servidor al que se enviarán los datos. Los puntos finales gestionan las peticiones POST y los datos adjuntos.
Establece el método HTTP en POST utilizando la propiedad method en las opciones de la petición para fetch().
Incluye información adicional como el tipo de contenido en los encabezados de la petición utilizando la propiedad headers como un objeto.
El cuerpo de la petición contiene los datos que se enviarán al servidor. Utiliza el formato JSON (JavaScript Object Notation) convirtiendo un objeto JavaScript en una cadena JSON con JSON.stringify().

Paso 2: Iniciar la petición

Utiliza la función fetch() para iniciar la petición POST.

Paso 3: Gestionar la respuesta

La promesa fetch() se resuelve en un objeto Response en caso de éxito. Gestiónalo con .then().
Verifica response.ok para códigos de estado de error como 400 o 500. Lanza un error para gestionar los fallos.
Analiza el cuerpo de la respuesta JSON a un objeto JavaScript utilizando response.json().

Paso 4: Gestionar errores

Utiliza .catch() para gestionar errores durante la petición, como problemas de red o del servidor.

Ejemplo completo: Crear un elemento de tarea

const url = 'https://api.example.com/todos';
const data = { 
  title: 'Buy groceries',
  completed: false
};

const jsonData = JSON.stringify(data);

const headers = new Headers();
headers.append('Content-Type', 'application/json');

fetch(url, {
  method: 'POST', 
  headers: headers,
  body: jsonData
})
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
})
.then(responseData => {
  console.log('Todo created successfully:', responseData);  
})
.catch(error => {
  console.error('Error:', error);
});

Este código JavaScript envía una petición POST para crear un nuevo elemento de tarea con un título y un estado de finalización. Demuestra la configuración de la petición, el envío con fetch(), la gestión de la respuesta y los errores.

Apidog - Una potente herramienta de API para crear peticiones POST Fetch

Apidog, una plataforma de desarrollo de API centrada en el diseño, puede ser el mejor amigo de un desarrollador de API. Puedes construir peticiones POST Fetch con Apidog, ¡y probarlas, simularlas y documentarlas después de diseñarlas!

button

Generar código Fetch utilizando Apidog

Puedes utilizar la función de generación de código de cliente de Apidog para que te proporcione shells de código de la API Fetch.

En cualquier API o petición, puedes localizar y pulsar el botón </>, y proceder a pulsar el botón Generate Client Code, como se muestra en la imagen anterior.

Con Apidog, puedes crear código de cliente Fetch. Todo lo que tienes que hacer a continuación es copiar y pegar el código en tu plataforma de codificación.

Crear y probar una petición POST Fetch utilizando Apidog

Comienza a construir tu propia petición POST Fetch con Apidog siguiendo los pasos que se indican a continuación. En Apidog, los parámetros del cuerpo de la petición POST incluyen datos JSON, datos de formulario, XML, etc.

Comienza creando una nueva petición HTTP POST en Apidog. Introduce una URL de API REST adecuada. Puedes utilizar una mezcla de parámetros de ruta y de consulta, junto con múltiples ID para crear una URL de API más específica.

Pasar datos JSON en una petición POST

A pesar de la entrada manual de tus datos JSON, Apidog también admite la generación automática de cuerpos de petición JSON a partir de plantillas, lo que ahorra tiempo y garantiza estructuras JSON coherentes.

Aquí tienes una guía detallada para POST de datos JSON, échale un vistazo ahora.

Pasar datos de formulario en una petición POST

En ciertos casos, es necesario enviar datos con el Content-Type de los parámetros form-data. Apidog simplifica este proceso. Como cliente de API fácil de usar, Apidog te permite incluir fácilmente datos de formulario en el cuerpo de la petición al probar las API. Puedes especificar el Content-Type para cada parámetro, lo que facilita el envío de peticiones form-data.

Subir archivos en una petición POST

Al probar las API, es común necesitar subir archivos como parte de la petición. En Apidog, puedes subir fácilmente archivos para probar creando una nueva petición y navegando a la pestaña "Body". Puedes hacer clic en el botón "Upload" para elegir qué archivo quieres subir en Apidog.

Una vez que hayas terminado de incluir todos los parámetros de la petición, puedes guardar la API POST haciendo clic en el botón Save.

Para asegurarte de que tu petición POST responde, haz clic en el botón Send para probar una petición.

Si tu petición se envía correctamente, deberías poder recibir una respuesta, como se muestra en la parte inferior de la imagen anterior.

Conclusión

Las peticiones POST Fetch son una combinación de las ventajas de la API Fetch con las peticiones POST, lo que permite a los desarrolladores de API enviar datos a los servidores de forma eficiente, limpia y moderna. Ofrecen beneficios como:

Sintaxis más sencilla en comparación con los métodos antiguos (XHR).
Mejora de la legibilidady con una clara separación de las preocupaciones.
Funciones integradas para facilitar la gestión de respuestas y errores.

Si estás trabajando con JavaScript, el uso de la API Fetch para las peticiones POST generalmente se recomienda debido a su enfoque moderno y sus características amigables para el desarrollador.

Cuando intentes encontrar una herramienta de API que sea apropiada para el diseño de peticiones POST Fetch, puedes considerar el uso de Apidog. Aparte de las funcionalidades genéricas de construcción, Apidog facilita la prueba, la simulación y la documentación de las API, ¡todo gratis! También puedes confiar en Apidog para que te ayude con la codificación de la API Fetch si no tienes tanta confianza.

button