3

Tengo el siguiente código JavaScript que consume la API de OpenWeather para la consulta del clima, el caso es que por alguna razón, la promesa que retorna fetch no esta funcionando como espero.

function getWeather(cityName) {
    let apiKey = "1ecf95a266618ca42f55e043f5bb942a";
    let data = fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`)
        .then((response) => {
            if (response.ok) {
                return response
            } else {
                throw new Error(`Error en la solicitud de clima de ${cityName}`)
            }
        })
    return data;
}

let city = "Caracas"
let weatherData = getWeather(city)
console.log(weatherData)

La idea es que data se almacene response pero en cambio, en el se esta almacenando la promesa en si. Como puedo resolver este problema?

3
  • 1
    Lectura recomendada: es.stackoverflow.com/questions/277690/… Commented el 25 oct. 2022 a las 13:56
  • perdon por la ignorancia pero esto no devuelve un ReadableStream? lei en la documentacion que hay que usar cierta logica para que ese Readable Stream te de los datos que necesitas, mas alla de las promesas y eso, es cierto? Commented el 25 oct. 2022 a las 14:34
  • 1
    @ElFuturoLlego Si el body de la respuesta es un Blob (datos en binario), puedes leerlo así, pero en este caso es un documento JSON (texto) y no necesitas complicarte la vida. Puedes ver la documentación en MDN Commented el 25 oct. 2022 a las 15:26

2 respuestas 2

5

Por mucho que las promesas o la sintaxis intenten ocultarlo, cuando trabajas en modo asíncrono no puedes gestionar las respuestas de modo síncrono. Por tanto, necesitas hacer algo como

function getWeather(cityName){
  let apiKey = "1ecf95a266618ca42f55e043f5bb942a";
  let data =  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`)
  //parseamos la respuesta json, dentro de una promesa
  .then(response => response.json()) 
  .catch(error => {
    throw new Error(`Error en la solicitud de clima de ${cityName}`)
  })
  return data; //data es una promesa con un objeto
}

let city = "Caracas"
getWeather(city).then(weatherData => console.log(weatherData));

O, con async/await:

async function getWeather(cityName){
  const apiKey = "1ecf95a266618ca42f55e043f5bb942a";
  try {
    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`);
    
    const data = await response.json();
    //aquí decidí mostrar directamente el valor, en lugar de devolverlo.
    console.log(data);
    return data; // se devolverá como una promesa, porque la función es async
  } catch(error) {
    throw new Error(`Error en la solicitud de clima de ${cityName}`)
  }
  
}

let city = "Caracas"
let promesa = getWeather(city);
// usamos el resultado para lo que queramos
// promesa.then(datos => ...);

-3

Estas igualando data a todo el fetch. Puedes ejecutar el fetch y igualar la respuesta a data:

function getWeather(cityName){
    let apiKey = "1ecf95a266618ca42f55e043f5bb942a";
    let data = null;
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`).then((response) => {
        if (response.ok){
            data = response;
        } else{
            throw new Error(`Error en la solicitud de clima de ${cityName}`)
        }
    })
    return data;
}
let city = "Caracas"
let weatherData = getWeather(city)
console.log(weatherData)

O simplemente puedes devolver el valor de la respuesta:

function getWeather(cityName){
    let apiKey = "1ecf95a266618ca42f55e043f5bb942a";
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`).then((response) => {
        if (response.ok){
            return response
        } else{
            throw new Error(`Error en la solicitud de clima de ${cityName}`)
        }
    })
}
let city = "Caracas"
let weatherData = getWeather(city)
console.log(weatherData)
4
  • Ninguna de las dos soluciones me funcionan
    – PySanti
    Commented el 25 oct. 2022 a las 13:37
  • Ambas soluciones intentan mezclar código asíncrono y código síncrono, lo que no puede funcionar Commented el 25 oct. 2022 a las 13:48
  • retorna null y undefined en ambos casos. Commented el 25 oct. 2022 a las 13:57
  • Esto no funciona porque el response sigue siendo una promesa para acceder a los datos del fetch necesitas llamar al método json() de la respuesta del fetch!
    – GmrYael
    Commented el 25 oct. 2022 a las 16:16

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.