Fetch API

@serverSerrverlesskiy

La Fetch API permite que JavaScript se comunique con el servidor mediante solicitudes HTTP y es un mejor reemplazo para la clase XMLHttpRequest. Las solicitudes se realizan mediante el método fetch(), que devuelve Promise.

Exchange

Sintaxis

Book

fetch(url, { options })

url - URL para enviar la solicitud;
options - parámetros de solicitud.

Al especificar el método fetch() sin options, recibirá una solicitud GET que descarga los datos en la dirección URL.

Video

Parámetros de consulta

Opción

El segundo argumento {options} acepta opciones de consulta. Lista de parámetros:

method - método de solicitud (GET, POST, PUT, DELETE, HEAD);
headers: encabezados HTTP;
body - cuerpo de la solicitud (usado para el método: POST / PUT);
cache: modo de almacenamiento en caché (predeterminado, recargar, sin caché);
mode - modo de solicitud (cors, no-cors, mismo origen);
redirect: especifica cómo manejar los redireccionamientos (seguimiento, error, manual);
referrer - referencia de solicitud;
signal - AbortSignal, solicitud de cancelación;
credentials - envío de cookies junto con la solicitud - mit, mismo origen.

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  mode: 'no-cors'
})

Obtener una respuesta

Baloncesto

El método fetch() devuelve Promise un objeto de la clase Response, que tiene las siguientes propiedades:

status - código de respuesta;
statusText - mensaje de texto correspondiente al código de respuesta;
ok: un valor booleano que indica el éxito del código de respuesta (verdadero: 200-299);
headers: un objeto con encabezados de respuesta, en el que la clave es el nombre del encabezado y el valor de la clave es el valor del encabezado correspondiente a la clave;
url: la URL a la que se envió la solicitud;
body - datos de respuesta en formato ReadableStream
bodyUsed es un valor booleano que indica que se están leyendo los datos.

fetch('https://jsonplaceholder.typicode.com/users').then(response => console.log(response))

Manejo de la respuesta

Descargar

Los datos transferidos están en formato ReadableStream. Puede utilizar los siguientes métodos para cambiar el formato:

text() - convierte la respuesta en una cadena;
json() - convierte la respuesta en formato JSON;
blob(): convierte la respuesta en un objeto Blob;
formData() - convierte la respuesta en una instancia de FormData;
arrayBuffer(): convierte la respuesta en un objeto ArrayBuffer.

Un ejemplo de cómo convertir una respuesta al formato JSON.

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data))

Procesamiento de errores

Error

Podemos averiguar si fetch() terminó con un error usando las propiedades: "status" y "ok".

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    if (!response.ok) {
      console.log('Algo salió mal... Estado:' + response.status)
    } else {
      return response.json()
    }
  })
  .then(data => console.log(data))

При помощи .catch()

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))

Solicitar ejemplos

Math

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data[0].name + ' and ' + data[2].name))
  .catch(error => console.log(error))

Lo mismo, utilizando la sintaxis async/await, de la que aprenderemos más en el próximo artículo.

let response = await fetch('https://jsonplaceholder.typicode.com/users')
let data = await response.json()
console.log(data[0].name + ' and ' + data[2].name)