Foro

Donar

Aprender a codificar — gratis 3,000-horas currículo

24 DE ENERO DE 2023 / #JAVASCRIPT

Fetch API – Cómo realizar un

GET Request y un POST
Request en JavaScript
Autor: Kingsley Ubah (Inglés)

Traductor: Federico Fagúndez

Original article: Fetch API – How to Make a GET

Request and POST Request in JavaScript

A menudo es posible que quieras que tu sistema se comunique con

otros servidores web para obtener información.

Por ejemplo, digamos que un nuevo usuario quiere registrar una

cuenta en tu sitio. Y en vez de rellenar manualmente el formulario
para enviar la información a tu sistema, quiere utilizar información
que ya se encuentra almacenada en otro servicio o plataforma (esto
es, una autenticación de terceros) para registrarse.

En ese caso, tu sistema tiene que comunicarse con el sistema de un

tercero para obtener la información del usuario. Esto lo realiza a
través de una API.
 Una API o Interfaz de Programación de Aplicaciones, es
Foro
Donar
simplemente un conjunto de reglas que guían como un
Aprender a codificar — gratis 3,000-horas currículo
software o sistema debe comunicarse con otro(software o
sistema).

Mi explicación dibujada a mano de una API

Si tu aplicación es una aplicación de una sola página, desarrollada

con un lenguaje de programación asincrónica como JavaScript,
tienes una herramienta útil para llevar a cabo esa tarea: fetch() .

¿Qué es el Fetch API?

fetch() es un mecanismo que te permite realizar llamadas AJAX
(Asynchronous JavaScript y XML) simples con JavaScript.

Asynchronous (asincrónico) significa que puedes usar fetch para

realizar llamadas a una API externa sin tener que detener la
ejecución de otras instrucciones. De esa forma, otras funciones en el
sitio pueden continuar ejecutándose, incluso cuando una llamada
a Donar
Foro
una API no haya sido resuelta.
Aprender a codificar — gratis 3,000-horas currículo
Cuando una respuesta en forma de datos es devuelta por la API, se
reanudan las tareas asincrónicas (fetch).

Es importante notar que fetch no es parte de los métodos de

JavaScript, sino más bien un método API web integrado en la
mayoría de los navegadores y accesible a través de JavaScript.
Como resultado, no será posible utilizarlos en el entorno de Node.js
(a menos que instales un módulo especial).

Cómo usar fetch() en JavaScript

Cuando hablamos de APIs, necesitamos hablar también de
endpoints. Un endpoint es una URL única que puedes llamar para
interactuar con otro sistema.

Supongamos que estamos realizando una petición a una API

externa, para obtener ciertos datos (como la publicación de un blog).
Para esto usaremos una simple petición GET (GET request).

Simplemente, llamamos al método fetch() con el URL endpoint

como argumento:

fetch('https://ubahthebuilder.tech/posts/1');

Tratando de obtener la publicación de un blog desde una API externa.

El cuerpo de la respuesta para este endpoint será la información

sobre una publicación de blog:
 {

Foro
Donar
userId: 1,

id: 1,

Aprender a codificar — gratis 3,000-horas currículo

title: 'A post by Kingsley',

body: 'Brilliant post on fetch...',

};

En última instancia, querrás obtener el cuerpo de la publicación.

Pero el objeto de respuesta contiene bastante más información que
el cuerpo, incluyendo el código de estado, encabezados y más
información.

Ten en cuenta que fetch API devuelve una promesa. Debido

a esto, necesitas anidar un método then() para manejar la
resolución. Aprende más acerca de promesas aquí.

Usualmente, los datos devueltos por la API no se encuentran en un

formato utilizable. Por lo tanto, necesitas convertir los datos a un
formato con los que JavaScript pueda operar. Por fortuna, puedes
usar el método json() para lograr esto:

fetch('https://ubahthebuilder.tech/posts/1')

.then(data => {

return data.json();

})

.then(post => {

console.log(post.title);

});

Recuperando la publicación del blog de la API y extrayendo solo la propiedad title

Como puedes ver en el código de arriba, es posible anidar una sub

secuencia del método then() para transformar los datos (en este
caso solamente extraje el valor de la propiedad title).
En este ejemplo simplemente queremos obtener de la API,
Forola
Donar
publicación de un blog. Pero, ¿qué pasaría si, en vez de eso,
Aprender a codificar — gratis 3,000-horas currículo
quisiéramos publicar una historia?

Cómo realizar un POST Request

Una vez que hayas avanzado sobre las GET requests, necesitarás
configurar algunas opciones más. Hasta ahora has proporcionado un
único argumento al método fetch() , el URL endpoint.

Para un POST request, necesitarás pasar un objeto de opciones de

configuración como segundo argumento. El objeto opcional puede
tomar muchos parámetros diferentes. En este caso, incluye
solamente la información más necesaria.

Al estar enviando un POST request, necesitarás declarar que estás

usando el método POST.

Además, necesitas pasar la información necesaria para crear la

nueva publicación del blog. Dado que estás enviando datos JSON,
será necesario establecer un encabezado Content-Type con el valor
application/json. Por último, necesitarás incluir el encabezado body ,
el cual contendrá como valor una única cadena de datos JSON.

const update = {

title: 'A blog post by Kingsley',

body: 'Brilliant post on fetch API',

userId: 1,

};

const options = {

method: 'POST',

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify(update),

};
 Foro
Donar
Y luego, la llamada
Aprenderaalacodificar
API: — gratis 3,000-horas currículo

fetch('https://jsonplaceholder.typicode.com/posts', options)
.then(data => {

if (!data.ok) {

throw Error(data.status);

return data.json();

}).then(update => {

console.log(update);

// {

//

title: 'A blog post by Kingsley',

//

body: 'Brilliant post on fetch API',

//

userId: 1,

//

id: 101

// };

}).catch(e => {

console.log(e);

});

Si tu petición (request) es exitosa, recibirás un cuerpo de respuesta

conteniendo el objeto de publicación del post junto con una nueva
ID. La respuesta varía dependiendo en como la API está configurada.

Finalmente, debe tener en cuenta que los puntos finales pueden

cambiar con el tiempo y las API pueden reestructurarse. Por lo
tanto, es una buena práctica colocar todas tus llamadas fetch juntas
para un más fácil acceso.

Conclusión
Aquí hay algunos puntos para resumir este artículo:
 Sistemas computacionales, como los software, se comunican
Foro
Donar
entre ellos y comparten información a través de una capa
Aprender a codificar — gratis 3,000-horas currículo
llamada API.

Una API contiene los conjuntos de reglas y protocolos que

guían como dos o más sistemas interactúan. Por ejemplo, el
sistema de Facebook debe interactuar con el sistema de
Google para obtener información de un usuario a través de
una API.

En JavaScript front-end, puedes realizar llamadas API

simples con el método fetch() .

Para realizar un GET request simple con fetch, necesitas

pasar un URL endpoint como argumento.

Para realizar un POST request simple, necesitas pasar otros

parámetros, incluido un objeto de configuración.

Si te gustó mi artículo y quieres ofrecerme tu apoyo, amablemente

visita mi Buy Me A Coffee page.

Gracias y nos vemos pronto.

Autor: Kingsley Ubah (Inglés)

Helping you learn how to code one tutorial at a time. Online creator and
entrepreneur.

Traductor: Federico Fagúndez

Estudio programación freeCodeCamp.
También soy estudiante avanzado
de canto lírico.

Si leíste hasta aquí, haz un tweet al autor para mostrarle que te

importa su trabajo. Tuitea un agradecimiento
 Aprende a codificar de forma gratuita. El plan de estudios de código
Foro
Donar
abierto de freeCodeCamp ha ayudado a más de 40,000 personas a
Aprender a codificar — gratis 3,000-horas currículo
obtener trabajos como desarrolladores. Empezar

ANUNCIO

Curso de Inglés
$ 3.900

Curso de Inglés
$ 3.900

Curso de Inglés
$ 3.900

Capacitarte

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States

Federal Tax Identification Number: 82-0779546)

Nuestra misión: ayudar a las personas a aprender a programar de forma gratuita. Logramos
esto mediante la creación de miles de videos, artículos y lecciones de programación
interactivas, todo disponibles gratuitamente para el público. También tenemos miles de grupos
de estudio de FreeCodeCamp alrededor el mundo.

Las donaciones a freeCodeCamp van dirigidas a nuestras iniciativas educativas y ayudan a

pagar servidores, servicios y personal.

Puedes hacer una donación deducible de impuestos aquí.

Guías de tendencias

Git Clone UX

Métodos Agile Proceso de Diseño

Python Main
Callback
Números Primos
Diseño de Producto
Foro
Donar

Debounce Aprender a codificar — gratis 3,000-horas

Digital Design currículo

URL Encode Juegos de Código

Blink HTML SVM

Python Tupla JavaScript forEach

JavaScript Push Google BERT

Java List Create Table SQL

Diseño Web Responsive ¿Qué es TLS?

¿Qué es un archivo SVG? ¿Qué es una red LAN?

PDF Password Remover ¿Qué es npm?

¿Qué es un Archivo PDF? Ejemplos de RSync

What Is Python? Random Forest

Our Charity

Acerca de Red de ex-Alumnos Código abierto Tienda Soporte Patrocinadores

Honestidad Académica Código de Conducta Política de privacidad Términos de servicio

Política de derechos de autor