Cómo utilizar Fetch para realizar llamadas AJAX en JavaScript

En esta serie compartiré con regularidad aprendizajes pequeños sobre JavaScript. Cubriremos los fundamentos de JS, navegadores, DOM, diseño de sistemas, arquitectura de dominio y marcos.

Fetch es una interfaz para realizar una solicitud AJAX en JavaScript. Los navegadores modernos lo implementan ampliamente y se utiliza para llamar a una API.

const promise = fetch(url, [options]) 

Llamar a fetch devuelve una promesa, con un objeto Response. La promesa se rechaza si hay un error de red y se resuelve si no hay problemas para conectarse al servidor y el servidor respondió un código de estado. Este código de estado puede ser 200, 400 o 500.

Una solicitud de FETCH de muestra:

 fetch(url) .then(response => response.json()) .catch(err => console.log(err)) 

La solicitud se envía como GET de forma predeterminada. Para enviar un POST / PATCH / DELETE / PUT puede usar la propiedad del método como parte del optionsparámetro. Algunos otros valores posibles optionspueden tomar:

  • method: como GET, POST, PATCH
  • headers: Objeto de encabezados
  • mode: Tales como cors, no-cors,same-origin
  • cache: modo caché para solicitud
  • credentials
  • body

Consulte la lista completa de opciones disponibles aquí.

Uso de ejemplo:

Este ejemplo demuestra el uso de fetch para llamar a una API y obtener una lista de repositorios de git.

const url = '//api.github.com/users/shrutikapoor08/repos'; fetch(url) .then(response => response.json()) .then(repos => { const reposList = repos.map(repo => repo.name); console.log(reposList); }) .catch(err => console.log(err)) 

Para enviar una solicitud POST, así es como se puede usar el parámetro del método con la sintaxis async / await.

const params = { id: 123 } const response = await fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(params) }); const data = await response.json(); 

¿Interesado en más JSBytes? Suscríbete al boletín