2

Estoy intentando realizar dos peticiones con fetch, con la respuesta de una se cambia el estado de un componente, y usando ese estado se hace una segunda petición. El problema es que la segunda petición queda en pendiente.

   componentDidMount(){
    console.log()
    fetch(`http://localhost:5000/tour/${this.state.id}`)
    .then(response => response.json())
    .then(tourJson=>this.setState({ tour: tourJson}))
    .then(fetch(`http://localhost:5000/ciudad/${this.state.tour[0].idciudad}`)
    .then(response => console.log(response.json()))
    )
1
  • En realidad el problema es que estás pasando la devolución de una función como parámetro en el then en lugar de devolver un callback, que es lo que espera then. Para solucionarlo bastaría con corregir tu línea donde haces el segundo fetch y quedaría así: .then(() => fetch(`http://localhost:5000/ciudad/${this.state.tour[0].idciudad}`) Commented el 29 ago. 2019 a las 21:57

2 respuestas 2

1

Te hice un comentario con la respuesta, pero me pareció interesante y apropiado para el sitio explicar bien qué sucede en este caso.

Este tipo de errores son normales cuando empezamos a concatenar theneables

Para empezar a explicar debemos tener claro cómo funciona una promesa, y sin irnos al nivel super técnico de cómo están construidas, debes tener en cuenta que una promesa es un valor que no se va a resolver en el instante que quieras, si no en cualquier otro momento, es decir, tal cual Javascript nos está prometiendo que nos devolverá un resultado.

Como la promesa no se va a resolver justo cuando la necesitemos en el código de ejecución, si no que lo hará cuando encuentre un espacio para hacerla, entonces la forma que tenemos para poder interactuar con ese valor que retorna la promesa es por medio del método then el cuál recibe como parámetro un callback (es una función como cualquier otra en Javascript). Dicho callback recibirá como parámetro el valor de la promesa una vez es resuelto, es decir:

const callback = (value) => { console.log(value) };
algunaTareaAsincronaQueRetornaUnaPromesa()
  .then(callback)  // <= Aquí ponemos nuestra función

Lo que hará esto es que cuando la tarea halla finalizado, entonces mostrará el valor en la consola. Super sencillo.

Otro asunto a tener en cuenta es que las promesas son encadenables o theneables es decir, podemos hacer tantos then queramos o necesitemos siempre que retornemos otra promesa dentro del then. Esto es muy útil y es precisamente lo que estás haciendo.

AHORA SI TU CÓDIGO

Si empezamos a trabajar de una forma un poco más declarativa podríamos hacer con nuestro ejemplo algo así:

algunaTareaAsincronaQueRetornaUnaPromesa()
  .then(console.log)  // Mostrará el valor cuando esté disponible

Básicamente en el fondo de como fueron programadas las promesas el está tomando esa función que le pasamos y la resuelve, un ejemplo de lo que sucede puede ser esto:

if (hayValorDisponible) {
  callback(valorDisponible);
}

Y si tenemos en cuenta que el callback que pasamos es console.log, entonces sería algo así:

if (hayValorDisponible) {
  console.log(valorDisponible);
}

Esto nos ayuda a identificar la fuente de tu problema. entonces entendemos que lo que sucede es esto al momento de resolver la promesa:

if (hayValorDisponible) {
  fetch(`http://localhost:5000/ciudad/${this.state.tour[0].idciudad}`)(valorDisponible);
}

Lo cual obviamente es un error, ya que si te das cuenta al momento de crear un objeto a partir de fetch te retorna un objeto no callable por lo que no podrías hacer algo como esto fetch(url)(valor), que es precisamente lo que sucede.

La mejor forma de solucionar tu problema es partiendo de una función que llame a al fetch. Quedando así tu código:

componentDidMount(){
  fetch(`http://localhost:5000/tour/${this.state.id}`)
    .then(response => response.json())
    .then(tourJson => this.setState({ tour: tourJson }))
    .then(() => fetch(`http://localhost:5000/ciudad/${this.state.tour[0].idciudad}`)
    .then(response => response.json())
    .then(console.log)
);

Como te das cuenta cambié dos líneas de tu código, en la primera volvemos una función la llamada al fetch, y la segunda línea que cambié es cuando le haces un console.log a tu respuesta. Básicamente porque response.json() retorna otra promesa, por esa razón al momento de mostrar el log te muestra que no se ha resuelto, porque no la estás esperando.

De esa forma internamente hace esto, y tu fetch es ejecutado exitosamente:

if (hayValorDisponible) {
  (() => {
    return fetch(`http://localhost:5000/ciudad/${this.state.tour[0].idciudad}`)
  })(valorDisponible);
}

Cualquier duda o pregunta, comenta

1

El problema es que no estás devolviendo nada en la respuesta de .then(tourJson=>this.setState({ tour: tourJson})).

tienes 2 opciones, o bien devolver algo para que se ejecute la siguiente promesa o bien, y creo que esto sería un poco mejor, y es esperar a que acabe setState y entonces hacer la siguiente llamada, que para tu caso sería algo más eficiente.

componentDidMount(){
    console.log()
    fetch(`http://localhost:5000/tour/${this.state.id}`)
    .then(response => response.json())
    .then(tourJson => this.setState({ tour: tourJson}, () => {
      .then(fetch(`http://localhost:5000/ciudad/${this.state.tour[0].idciudad}`)
      .then(response => console.log(response.json()))
    }))
)

No obstante yo crearía un función a la que pase la ruta y me devuelva la respuesta de la petición algo más genérico que puedas reutilizar, sería algo así.

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}
2
  • Encuentro un error con los parentesis, podría indicarme como es la forma correcta de cerrar el segundo fetch? Commented el 29 ago. 2019 a las 7:38
  • en tu código falta un cierre de parentesis en la linea .then(fetch(localhost:5000/ciudad/${this.state.tour[0].idciudad}), al final añade ) y quítaselo a la linea de debajo Commented el 29 ago. 2019 a las 7:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.