Se usó la API de Cloud Translation para traducir esta página.

Introducción a fetch()

Matt Gaunt

fetch() te permite realizar solicitudes de red similares a XMLHttpRequest (XHR). El La principal diferencia es que la Fetch API usa promesas, que tiene un API más sencilla para evitar las complicadas devoluciones de llamadas en el API de XMLHttpRequest.

Navegadores compatibles

Origen

Si nunca usaste Promesas consulta la Introducción a las promesas de JavaScript.

Solicitud de recuperación básica

Este es un ejemplo implementado con un elemento XMLHttpRequest y, luego, con fetch. Queremos solicitar una URL, obtener una respuesta y analizar como JSON.

XMLHttpRequest

Un XMLHttpRequest necesita dos objetos de escucha para controlar el resultado correcto. y de errores, y una llamada a open() y send(). Ejemplo de la documentación de MDN

function reqListener() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function reqError(err) {
    console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

Recuperar

Nuestra solicitud de recuperación se ve de la siguiente manera:

fetch('./api/some.json')
  .then(
  function(response) {
    if (response.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +
        response.status);
      return;
    }

    // Examine the text in the response
    response.json().then(function(data) {
      console.log(data);
    });
  }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

La solicitud fetch() solo necesita una llamada para realizar el mismo trabajo que el XHR. ejemplo. Para procesar la respuesta, primero verificamos que el estado de la respuesta sea 200 y, luego, analiza la respuesta como JSON. La respuesta a una solicitud fetch() es una Stream, lo que significa que, después llamamos al método json(), se devuelve una promesa. La transmisión se realiza de forma asíncrona.

Metadatos de la respuesta

El ejemplo anterior mostró el estado de la Response y cómo analizar la respuesta como JSON. Aquí te mostramos cómo manejar otros metadatos que podrían interesarte para acceder, como los encabezados:

fetch('users.json').then(function(response) {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));

    console.log(response.status);
    console.log(response.statusText);
    console.log(response.type);
    console.log(response.url);
});

Tipos de respuesta

Cuando realizamos una solicitud de recuperación, la respuesta recibirá un response.type. de “basic”, “cors” o “opaque” Estas types muestran de dónde proviene el recurso y que puedes usar para determinar cómo tratar el objeto de respuesta.

Cuando el navegador solicita un recurso en el mismo origen, la respuesta tiene un El tipo basic con restricciones sobre lo que puedes ver en la respuesta.

Si se hace una solicitud para un recurso en otro origen y ese origen devuelve CORs header y, luego, el tipo es cors. cors son similares a las respuestas de basic, pero restringen los encabezados que puede ver como Cache-Control, Content-Language, Content-Type, Expires, Last-Modified y Pragma.

Las respuestas de opaque provienen de un origen diferente que no muestra CORS. encabezados. Con una respuesta opaca, no podremos leer los datos devueltos o ver el estado de la solicitud, lo que significa que no puedes verificar si la solicitud fue exitosa.

Puedes definir un modo para una solicitud de recuperación de modo que solo ciertos tipos de solicitudes resolver. Los modos que puedes configurar son los siguientes:

same-origin solo se aplica de forma correcta a las solicitudes de recursos del mismo origen. rechaza todas las demás solicitudes.
cors permite solicitudes de activos del mismo origen y otros que devuelve los encabezados COR correspondientes.
cors-with-forced-preflight realiza una comprobación previa verificación antes de realizar cualquier solicitud.
no-cors está diseñado para realizar solicitudes a otros orígenes que no tengan CORS. y dan como resultado una respuesta opaque. posible en el permiso global de la ventana en este momento.

Para definir el modo, agrega un objeto de opciones como el segundo parámetro en la fetch y define el modo en ese objeto:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
    .then(function(response) {
    return response.text();
    })
    .then(function(text) {
    console.log('Request successful', text);
    })
    .catch(function(error) {
    log('Request failed', error)
    });

Encadenamiento de promesas

Una de las mejores características de las promesas es la capacidad de encadenarlas. Para fetch(), te permite compartir la lógica entre las solicitudes de recuperación.

Si trabajas con una API de JSON, debes verificar el estado y analizar el JSON para cada respuesta. Para simplificar tu código, define el estado y Análisis de JSON en funciones separadas que muestran promesas y usan la recuperación para manejar solo los datos finales y el caso de error.

function status(response) {
    if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
    } else {
    return Promise.reject(new Error(response.statusText))
    }
}

function json(response) {
    return response.json()
}

fetch('users.json')
    .then(status)
    .then(json)
    .then(function(data) {
    console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
    console.log('Request failed', error);
    });

En este ejemplo, se define una función status que verifica response.status y devuelve una promesa resuelta como Promise.resolve(): o una promesa rechazada, ya que Promise.reject(). Este es el primer método al que se llama en la cadena fetch().

Si se resuelve la promesa, la secuencia de comandos llama al método json(), que devuelve una segunda promesa a partir de la llamada a response.json() y crea una objeto que contenga el JSON analizado. Si el análisis falla, la promesa se se rechaza y se ejecuta la sentencia catch.

Esta estructura te permite compartir la lógica en todas tus solicitudes de recuperación, lo que facilita código más fácil de mantener, leer y probar.

Solicitud POST

A veces, una aplicación web necesita llamar a una API con un método POST e incluir algunas parámetros en el cuerpo de la solicitud. Para ello, configura method y body en las opciones fetch():

fetch(url, {
    method: 'post',
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
    })
    .then(json)
    .then(function (data) {
    console.log('Request succeeded with JSON response', data);
    })
    .catch(function (error) {
    console.log('Request failed', error);
    });

Envía credenciales con una solicitud de recuperación

Para realizar una solicitud de recuperación con credenciales como cookies, configura los parámetros Valor de credentials en "include":

fetch(url, {
    credentials: 'include'
})