Cómo funciona el método fetch()

Question

Estoy practicando con las peticiones asíncronas. En uno de los ejercicios sale éste código. Lo que no llego a entender es el método .then(). A este método se le pasa una función por parámetro que a la vez recibe otro parámetro. Éste segundo parámetro response a qué hace referencia? o de dónde sale? No entiendo el flujo de ejecución del código, es decir, entiendo la lógica del código y lo que hace, pero no entiendo realmente cómo lo hace.

Código

let luke

function _handleError(err) {
  console.log(`Request failed: ${err}`)
}


fetch('https://www.swapi.co/api/people/1/')
  .then(function a(response) {
    return response.json()
  })
  .then(function b(json) {
    luke = json
  return fetch(luke.homeworld)
  })
  .then(function c(response) {
    return response.json()
  })
  .then(function d(json) {
    luke.homeworld = json
    console.log(`${luke.name} nacio en ${luke.homeworld.name}`)
  })
  .catch(err => _handleError(err))

la función dentro de `then` recibe como parametro el return de la funcion anterior. `fetch` en el primer caso. y utilizas ese parametro `response` para usarlo una vez que esté listo. — lois6b, May 23 '18 at 08:53

Pablo Lozano · Accepted Answer · 2021-06-08T14:59:19.993

El método fetch realiza una petición GET a la URL que recibe como parámetro y devuelve una promesa (Promise) de una respuesta (Response). Una promesa representa un valor que estará disponible en el futuro (o que no lo estará nunca). Cuando ese valor esté disponible, se ejecutarán las funciones que le indiquemos mediante los métodos .then, .catch y/o .finally.

Lo que complica el entendimiento es que el objeto response tiene un método .json() que, a su vez, devuelve una promesa, así que te escribo el código algo simplificado para que sea más fácil de seguir:

//esta función espera un objeto normal
function muestraDatos(data) {
    console.log('La respuesta fue', data);
  }

//esta función espera un objeto Response
function gestionaRespuesta(response) {
  let promesaData=response.json(); 
  promesaData.then(muestraDatos);
}

function gestionaError(error) {
  console.log('El error fue',error);
}

let promesa=fetch('https://swapi.dev/api/people/1/');
promesa.then(gestionaRespuesta).catch(gestionaError);

Puedes encontrar más información en esta pregunta y sus respuestas

Cómo funciona el método fetch()

1 Answers1